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

Posted 2023-02-22

【中文标题】使用反应路由器在应用程序内路由以移动到另一个页面

【英文标题】：routing within an app using react router to move to another page

【发布时间】：2020-01-26 02:27:10

【问题描述】：

我正在尝试在我的应用中使用路由器 所以我使用了 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>
);

【参考方案1】：

使用exact 作为您的家乡路线中的一个属性，如下面的代码。

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

【参考方案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，它试图做反应路由器的工作

【参考方案3】：

你可以试试这个：

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

【讨论】：

所提供的答案被标记为低质量帖子以供审核。以下是一些关于如何写出好的答案的指南？提供的这个答案可能是正确的，但它可以从解释中受益。仅代码答案不被视为“好”答案。来自评论。