使用反应路由器在应用程序内路由以移动到另一个页面

Question

我正在尝试在我的应用程序中使用路由器所以我使用了 react-router-dom，但我遇到了问题，研究并找到了这个链接，但仍然没有帮助我。 不变失败：您不应该在 <Router> 之外使用 <Route>你能告诉我如何使用路由和链接吗我需要重定向到另一个页面。在下面提供我的代码片段和沙箱。 https://codesandbox.io/s/still-smoke-uf731let Channel = ({ channelName, channelString, onClick, active }) => (  <div onClick={onClick} className=" col-lg-2 col-md-4 col-sm-6 ">    <div>router</div>    <Router>      <Link to={"/here"}> here</Link>      <Switch>        <Route path="/auth" />        <Route path="/" />      </Switch>    </Router>    <div      className="channel-button"      style={{        backgroundColor: active === channelString ? "orange" : ""      }}    >      <p>{channelName}</p>    </div>  </div>);

Answer 1

你可以试试这个：

import Stats from './containers/stats';

<Route

   exact={true}

   path="/"

   component={Stats}

   key="Mykey"

 />

Answer 2

使用exact在如下面的代码你家的路线的属性。

<Router>

  <Link to={"/here"}> here</Link>

  <Switch>

    <Route exact path="/" />

    <Route path="/auth" />

  </Switch>

</Router>