React Router перестает работать после обновления React - PullRequest
Новая
       26

React Router перестает работать после обновления React

0 голосов
/ 24 апреля 2020

Я обновляю React с v16.0.0 до последней версии, чтобы использовать Hook, после обновления React Router перестает работать.

Это код AppRoute: 

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import DashboardPage from '../components/DashboardPage';
import HelpPage from '../components/HelpPage';
import NotFoundPage from '../components/NotFoundPage';
import LoginPage from '../components/LoginPage';
import PrivateRoute from './PrivateRoute';
import PublicRoute from './PublicRoute';

export const history = createHistory();

const AppRouter = () => (
  <Router history={history}>
    <div>
      <Switch>
        <PublicRoute path="/" component={LoginPage} exact={true} />
        <PrivateRoute path="/dashboard" component={DashboardPage}/>
        <Route path="/help" component={HelpPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
 </Router>
);

export default AppRouter;

I ' м получаю:

Выход

большое спасибо!

Ori

Ответы [ 2 ]

0 голосов
/ 24 апреля 2020

Попробуйте не комбинировать логи c с пользовательским интерфейсом 

// ...code...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// ...code...
const AppRouter = () => {
   const [loggedIn, setLoggedIn] = useState(false)

   return (
     <Router>
         <Switch>
           {
              !loggedIn 
              ? <Route exact path="/" component={LoginPage} />
              : <Route exact path="/dashboard" component={DashboardPage}/>
           }
           <Route exact path="/help" component={HelpPage} />
           <Route component={NotFoundPage} />
         </Switch>
    </Router>
   );
}
0 голосов
/ 24 апреля 2020

Компонент маршрутизатора в react-router-dom на самом деле называется BrowserRouter, а не Router, поэтому измените Router import и Tag на BrowserRouter или просто укажите псевдоним, и он должен работать без изменения тега 

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

и вместо createHistory используйте createBrowserHistory 

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

Refrence здесь

CodeSandbox здесь

...