Как исправить ошибку history of undefined при использовании BrowserRouter из модуля react-router-dom версии 5?

Question

[Ken Jee]

Почему при использовании BrowserRouter изreact-router-dom версии 5 возникает ошибка

Uncaught TypeError: Cannot read property 'history' of undefined

import "../../styles/scss/app.scss";

import React from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PrivateRoute from 'react-private-route';

import Login from './Login';
import Home from './Home';
import NotFound from "./NotFound";

export default class App extends React.Component {

    render() {

        return(
            <BrowserRouter>
                <Switch>
                    <Route path="/login" component={Login} />
                    <PrivateRoute exact path="/" component={Home} isAuthenticated={true} />
                    <Route component={NotFound} />
                </Switch>
            </BrowserRouter>
        )

    }

}

import React, {Suspense} from "react";
import ReactDOM from "react-dom";
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';

import App from "./components/App";

ReactDOM.render(
    <I18nextProvider i18n={i18n}>
        <Suspense fallback="Loading">
            <App />
        </Suspense>
    </I18nextProvider>,
    document.getElementById('root')
);

UPD:
Все работает нормально, если в App.js PrivateRoute заменить на обычный Route... Проблемка явно связана с PrivateRoute из модуля react-private-route https://github.com/hansfpc/react-private-route

Comments

[Антон Спирин]

index.js покажите.

[Ken Jee]

Антон Спирин, добавил в описании вопроса

[Антон Спирин]

Ken Jee, у вас где-нибудь в коде есть обращения к history?

[Ken Jee]

Антон Спирин, нет, нету. Я докопал до того, что все работает нормально, если в App.js PrivateRoute заменить на обычный Route

[Антон Спирин]

Ken Jee, вам следовало опубликовать свой реальный код. В примере нет никаких PrivateRoute.

[Ken Jee]

Антон Спирин, обновил код, сорри )))

Answer 1

[Антон Спирин]

Выпиливайте react-private-route. Эта библиотека использует предыдущую версию react-router.
Нужный вам компонент можно реализовать так:

const PrivateRoute = ({ component: Component, render, isSignedIn, ...rest }) => (
  <Route
    {...rest}
    render={props => {
      if (!isSignedIn) return (
        <Redirect
          to={{
            pathname: '/login',
            state: { referrer: props.history.location.pathname },
          }}
        />
      );

      if (render) return render({ ...props });

      return <Component {...props} />;
    }}
  />
);

Если используете Redux, то можно добавить обертку:

const mapStateToProps = (state) => ({
  isSignedIn: isSignedInSelector(state),
});

export default connect(mapStateToProps)(PrivateRoute);

и не передавать isSignedIn хардкодом. Так же для этой цели можно использовать контекст.