React Router：重定向到不同的组件

Question

登陆页面上有两个主要链接，然后当用户单击该选项时，它应该重定向到该组件，而不是在同一页面中呈现下面的组件。

但是，该组件不是转到下一页，而是像导航栏一样显示在下方。

const MainRoutes = () => {
  return (
    <ReactRouterDOM.HashRouter>
      <div className='routes'>
        <nav>
          <ul>
            <li>
              <Link to='/team-member'>Team Member</Link>
            </li>
            <li>
              <Link to='/moderator'>Moderator</Link>
            </li>
          </ul>
        </nav>
        <Route path='/team-member' component={TeamMember} />
        <Route path='/moderator' component={Moderator} />
      </div>
    </ReactRouterDOM.HashRouter>
  );
};

const App = () => {
  return (
    <div className='app'>
      <MainRoutes />
    </div>
  );
};

Answer 1

您需要将路由包装在Switch中：

<Switch>
  <Route exact path='/team-member' component={TeamMember} />
  <Route exact path='/moderator' component={Moderator} />
</Switch>

当Switch呈现与该位置匹配的第一个子<Route>时。 此外，它专门呈现一条路线（您需要）。

编辑：

如果您不想在其他组件上显示NavBar ，而只想在 index route /上显示，您可以这样做：

const MainRoutes = () => {
  return (
    <HashRouter>
      <div className="routes">
        <Switch>
          <Route exact path="/" component={NavBar} />
          <Route exact path="/team-member" component={TeamMember} />
          <Route exact path="/moderator" component={Moderator} />
        </Switch>
      </div>
    </HashRouter>
  )
}

导航栏：

function NavBar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/team-member">Team Member</Link>
        </li>
        <li>
          <Link to="/moderator">Moderator</Link>
        </li>
      </ul>
    </nav>
  )
}