在应用内使用React Router路由到另一个页面

Question

• 我正在尝试在我的应用中使用路由器
• 所以我使用了react-router-dom，但是我遇到了问题，

• 已研究并找到此链接，但仍然没有帮助我。Invariant failed: You should not use <Route> outside a <Router>

• 您能告诉我如何使用路由和链接

• 我需要重定向到另一个页面。
• 在下面提供我的代码段和沙箱。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

将exact用作家庭路线的属性，如以下代码。

<Router>
  <Link to={"/here"}> here</Link>
  <Switch>
    <Route exact path="/" />
    <Route path="/auth" />
  </Switch>
</Router>

Answer 2

import Stats from './containers/stats';
<Route
   exact={true}
   path="/"
   component={Stats}
   key="Mykey"
 />

Answer 3

我检查了您的沙箱。看起来是个不错的开始，但是您搞砸了一些事情。

这是我的沙箱分叉：https://codesandbox.io/embed/staging-fast-rr5k9

首先，不要将React组件放入容器中，将它们放入components文件夹中并导入它们。

发生的事情是，您拥有的每一页都有全新的<Router>。所以我把路由器拔了出来。它也不能正确导入。应该是

import { BrowserRouter as Router } from "react-router-dom";

所以您几乎需要这样的东西

      <div>
        <Link to={"/bbc-news"}>BBC</Link>
      </div>
      <div>
        <Link to={"/cnbc"}>CNBC</Link>
      </div>

      <Switch>
        <Route
          key={"fbbc-news"}
          path="/bbc-news"
          render={p => <Channel channelName="BBC" channelString="bbc-news" />}
        />
        <Route
          key={"cnbc"}
          path="/cnbc"
          render={p => <Channel channelName="CNBC" channelString="cnbc" />}
        />
      </Switch>
    </Router>

通道组件在哪里渲染通道内部内容。 Route中的key很重要，因为它可以使React正确触发componentDidMount，该组件调用要获取的thunk动作（这是完美的）。然后访问取自您放置在Redux =>

中的结果。

const mapStateToProps = state => ({ json: state.json });

您不需要拥有很多东西，因此我将它们删除了，例如试图执行路由器工作的onClick，>