reactjs - React Route 渲染错误的组件

Question

我正在使用 react-router-dom@5.2.0 进行路由，但我在使用 React 路由时遇到了一些问题。

这是我的 app.js 渲染代码:

return (
  <div>
    <BrowserRouter>
      <Context>
        {/* Students */}
        <Route exact path='/student'><Home /></Route>
        <Route path='/student/signup'><SignupScreen /></Route>

        {/* Tutors */}
        <Route path='/tutor/signup'><TSignupScreen /></Route>
      </Context>
    </BrowserRouter>
  </div>
);

当我访问 "/student" 路由时，它呈现学生注册组件，但 url 没有改变。你可以看到下面的图片

Answer 1

将所有路由包裹在Switch 中，它呈现与位置匹配的第一个 child 。

import { BrowserRouter, Route, Switch } from "react-router-dom";
...
<BrowserRouter>
    <Context>
      <Switch>
      {/* Students */}
      <Route exact path='/student'><Home /> </Route>
      <Route path='/student/signup' > <SignupScreen /> </Route>

      {/* Tutors */}
      <Route path='/tutor/signup'> <TSignupScreen />  </Route>
      </Switch>
    </Context>
 </BrowserRouter>