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

Question

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

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

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

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

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

这是我的沙盒分支：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>

Channel 组件在哪里渲染通道内的内容。 Route 中的key 很重要，因为它使 React 正确地触发了 componentDidMount，它调用了获取的 thunk 动作（那是完美的）。 然后访问 fetch 的结果，你已经把它放在 Redux =>

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

你不需要很多你拥有的东西，所以我删除了它们，比如 onClick，它试图做反应路由器的工作

Answer 3

你可以试试这个：

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