Question

使用我一直在使用的所有react-apps，此配置运行良好，但是目前，路由无法渲染，我的URL更改了，但页面仍然相同，即使404页面也没有工作

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import LandingPage from './LandingPage';
import AuthFlow from './AuthFlow';
import NotFound from './404';
import Nav from '../components/Navbar/Navbar';
import Login from './AuthFlow/Login/Login';

function RootNavigation() {
  return (
    <Router>
      <Nav></Nav>
      <Switch>
        <Route exact to='/' component={LandingPage}></Route>
        <Route exaect to='/login' component={Login}></Route>
        <Route to='*' component={NotFound}></Route>
      </Switch>
    </Router>
  );
}

export default RootNavigation;


import React from 'react';
import RootNavigation from './layouts/RootNavigation';

function App() {
  return <RootNavigation></RootNavigation>;
}

export default App;

Answer 1

您应该将路径名通过prop path传递到Route组件。

<Switch>
    <Route exact path='/' component={LandingPage}></Route>
    <Route exact path='/login' component={Login}></Route>
    <Route path='*' component={NotFound}></Route>
</Switch>

Answer 2

to道具用于<Link>组件进入特定页面。尝试在path='/page'组件上将exact与Route道具一起使用。

react-router-dom v ^ 5.2.0路由故障排除

2 个答案: