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

Question

我正在尝试在我的应用程序中使用路由器

所以我使用了 react-router-dom，但我遇到了问题，

研究并找到了这个链接，但仍然没有帮助我。 不变失败：您不应该在 <Router> 之外使用 <Route>

你能告诉我如何使用路由和链接吗

我需要重定向到另一个页面。

在下面提供我的代码片段和沙箱。 https://codesandbox.io/s/still-smoke-uf731

let 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&nbsp; &nbsp;exact={true}&nbsp; &nbsp;path="/"&nbsp; &nbsp;component={Stats}&nbsp; &nbsp;key="Mykey"&nbsp;/>

Answer 2

使用exact在如下面的代码你家的路线的属性。<Router>&nbsp; <Link to={"/here"}> here</Link>&nbsp; <Switch>&nbsp; &nbsp; <Route exact path="/" />&nbsp; &nbsp; <Route path="/auth" />&nbsp; </Switch></Router>