Компонент не отображается после history.push()

Вы создаете новую историю каждый раз, когда вызываете createHistory(). Если вы используете react-router-dom, вы можете просто использовать withRouter HOC, который будет передавать объект history компоненту через prop. Затем вы будете использовать history.push('/') или, если он находится в class component, this.props.history.push('/') и так далее.

Рабочий пример: https://codesandbox.io/s/p694ln9j0

маршруты (определить history внутри routes)

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import { createBrowserHistory } from "history";
import Header from "../components/Header";
import Home from "../components/Home";
import About from "../components/About";
import Contact from "../components/Contact";
import ScrollIntoView from "../components/ScrollIntoView";

const history = createBrowserHistory();

export default () => (
  <Router history = {history}>
    <div>
      <ScrollIntoView>
        <Header />
        <Switch>
          <Route exact path = "/" component = {Home} />
          <Route path = "/about" component = {About} />
          <Route path = "/contact" component = {Contact} />
        </Switch>
        <Header />
      </ScrollIntoView>
    </div>
  </Router>
);

компоненты/Header.js (мы хотим получить доступ к history, однако иногда нам приходится использовать withRouter, потому что такие компоненты, как Header, не находятся в <Route "/example" component = {Header}/> HOC, поэтому он не знает о нашей маршрутизации)

import React from "react";
import { withRouter } from "react-router-dom";

const Header = ({ history }) => (
  <header>
    <nav style = {{ textAlign: "center" }}>
      <ul style = {{ listStyleType: "none" }}>
        <li style = {{ display: "inline", marginRight: 20 }}>
          <button onClick = {() => history.push("/")}>Home</button>
        </li>
        <li style = {{ display: "inline", marginRight: 20 }}>
          <button onClick = {() => history.push("/about")}>About</button>
        </li>
        <li style = {{ display: "inline", marginRight: 20 }}>
          <button onClick = {() => history.push("/contact")}>Contact</button>
        </li>
      </ul>
    </nav>
  </header>
);

export default withRouter(Header);

компоненты/Home.js (такой компонент, как Home, знает о маршрутизации и имеет объект history, уже переданный через <Route path = "/" component = {Home} /> HOC, поэтому withRouter не требуется)

import React from "react";

const Home = ({ history }) => (
  <div className = "container">
    <button
      className = "uk-button uk-button-danger"
      onClick = {() => history.push("/notfound")}
    >
      Not Found
    </button>
    <p>
      ...
    </p>
  </div>
);

export default Home;

Та же концепция, что и выше, однако, если вы не хотите использовать withRouter, вы можете просто создать экземпляр history, который будет использоваться всеми вашими компонентами, которым он нужен. Вы будете import этот history экземпляр и будете перемещаться с помощью history.push('/'); и так далее.

Рабочий пример: https://codesandbox.io/s/5ymj657k1k

история (определить history в собственном файле)

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

маршруты (импортировать history в routes)

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import Header from "../components/Header";
import Home from "../components/Home";
import About from "../components/About";
import Contact from "../components/Contact";
import ScrollIntoView from "../components/ScrollIntoView";
import history from "../history";

export default () => (
  <Router history = {history}>
    <div>
      <ScrollIntoView>
        <Header />
        <Switch>
          <Route exact path = "/" component = {Home} />
          <Route path = "/about" component = {About} />
          <Route path = "/contact" component = {Contact} />
        </Switch>
        <Header />
      </ScrollIntoView>
    </div>
  </Router>
);

компоненты/Header.js (импортировать history в Header)

import React from "react";
import history from "../history";

const Header = () => (
  <header>
    <nav style = {{ textAlign: "center" }}>
      <ul style = {{ listStyleType: "none" }}>
        <li style = {{ display: "inline", marginRight: 20 }}>
          <button onClick = {() => history.push("/")}>Home</button>
        </li>
        <li style = {{ display: "inline", marginRight: 20 }}>
          <button onClick = {() => history.push("/about")}>About</button>
        </li>
        <li style = {{ display: "inline", marginRight: 20 }}>
          <button onClick = {() => history.push("/contact")}>Contact</button>
        </li>
      </ul>
    </nav>
  </header>
);

export default Header;

компоненты/Home.js (по-прежнему знает о маршрутизации и имеет объект history, уже переданный через <Route path = "/" component = {Home} /> HOC, поэтому импорт history не требуется, но вы все равно можете импортировать его, если хотите — просто не разбирайте history в Home' параметры функции)

import React from "react";

const Home = ({ history }) => (
  <div className = "container">
    <button
      className = "uk-button uk-button-danger"
      onClick = {() => history.push("/notfound")}
    >
      Not Found
    </button>
    <p>
      ...
    </p>
  </div>
);

export default Home;

Но вы можете подумать, а как насчет BrowserRouter? Ну, у BrowserRouter есть свой внутренний history объект. Мы снова можем использовать withRouter для доступа к его history. В этом случае нам даже не нужно createHistory() вообще!

Рабочий пример: https://codesandbox.io/s/ko8pkzvx0o

маршруты

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Header from "../components/Header";
import Home from "../components/Home";
import About from "../components/About";
import Contact from "../components/Contact";
import Notfound from "../components/Notfound";
import ScrollIntoView from "../components/ScrollIntoView";

export default () => (
  <BrowserRouter>
    <div>
      <ScrollIntoView>
        <Header />
        <Switch>
          <Route exact path = "/" component = {Home} />
          <Route path = "/about" component = {About} />
          <Route path = "/contact" component = {Contact} />
          <Route component = {Notfound} />
        </Switch>
        <Header />
      </ScrollIntoView>
    </div>
  </BrowserRouter>
);

Несколько моментов:

1) Используйте import { Router} from 'react-router-dom' вместо import { BrowserRouter as Router} from 'react-router-dom'

2) Создайте переменную history в другом файле, а именно (можно изменить) ../src/services/history.js и содержание должно быть:

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

Вам нужно будет установить пакет react-history до npm install --save react-history

3) Импортируйте историю в основной файл и передайте ее внутри компонента Router.

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom'
import history from './services/history'


class App extends React.Component {

    render() {
        return (
            <Router history = {history}>
                <Switch>
                    <Route exact path='/' component = {MainPage}></Route>
                    <Route exact path='/vendor' component = {VendorPage}></Route>
                    <Route exact path='/client' component = {ClientPage}></Route>
                </Switch>
            </Router>
        );
    }
}

export default App;

4) Теперь вы можете использовать history в любом месте компонентов,

import React from 'react'
import history from '../services/history';

export default class VendorPage extends React.Component {

    loginUser = () => {
        if (<SOME_CONDITION>)
            history.push('/client')
    }

    render() {
        return (
            <h1>Welcome to Vendor Page....</h1>
        )
    }
}

Надеюсь, поможет..

:)

используйте import { Router } вместо import { BrowserRouter as Router } . Поскольку BrowserRouter игнорирует реквизит истории.

Это может кому-то помочь. Убедитесь, что версия пакета history совместима с версией react-router-dom.

Эта комбинация не работает для меня:

история: 5.0.0 с реактивным роутером: 5.2.0

Это комбо сделал:

история: 4.10.1 с реактивным роутером 5.2.0

проверить версию react, react-router, react-router-dom и версию пакета history, которая также бесполезна – моя конфигурация package.json

"history": "^4.10.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "5.1.2",
"react-router-dom": "5.1.2"

проверьте эту ссылку: - https://stackblitz.com/edit/react-34ohqv?embed=1&file=package.jsonhttps://stackblitz.com/edit/react-router-example-mahi-hzitgg?embed=1&file=index.js

Для люди, использующие хуки сработало использование хука useLocation() вместо useHistory().

  const { pathname } = useLocation();

Компонент перерисовывается каждый раз, когда изменяется путь.

Понижение пакета истории до истории: у меня работает 4.10.1 с react-router-dom 5.2.0

Использовать этот:

import { useHistory, useRouteMatch } from 'react-router-dom';

let history = useHistory();
let match = useRouteMatch();