如何在两个不同的组件中使用路由 - ReactJS

Posted 2023-02-22

【中文标题】如何在两个不同的组件中使用路由 - ReactJS

【英文标题】：How to use routes in two different components - ReactJS

【发布时间】：2018-07-21 06:11:18

【问题描述】：

我正在使用 ReactJS 创建一个应用程序。我正在使用来自react-router-dom 的反应路由器 v4。

我已经在 index.js 文件中编写了路由。

<BrowserRouter>
<Switch>
    <Route exact path="/" component=Login />
    <Route exact path='/dashboard' component=Viewport />
</Switch>
</BrowserRouter>

Viewport.js 文件中的应用程序的其余部分。

    return (
        <div className="">
            <Sidebar navigation=this.viewport />
            <HeaderBanner user=this.props.user />
            <div className="center-panel">
                //todo
                //Can I use router here?
            </div>
        </div>
    )

用户登录后，我正在渲染默认包含侧边栏和标题栏的视口。基于侧边栏导航中的项目单击，我需要动态渲染组件。到目前为止，如果我写任何东西来代替 todo，它只会为整个浏览器窗口呈现该组件。 有没有办法在应用程序的多个地方使用路由器？如果是，我该如何实施？如果不是，最好的解决方案是什么？ 据我所知，路由器将堆叠在应用程序的一个位置。

提前致谢。

【问题讨论】：

当然你可以使用那里的路线。在 react-router-dom 中查看 Switch 的文档。

【参考方案1】：

我最近在 youtube 上学习了一个非常有用的教程

所以我将其中的一部分应用到您的设置中

<BrowserRouter>
  <div>
    <Route exact path="/" component=Login />
    <Route exact path='/dashboard' component=Viewport />
  </div>
</BrowserRouter>


import  NavLink, Route  from 'react-router-dom';

class Viewport extends Component 
  constructor(props) 
    super(props);
  

  render() 
    return (
      <div>
        <div className="Side-bar">
          <NavLink
            activeClassName="active"
            to=`$this.props.match.url/sub-page-name-1`>Sub Page 1</NavLink>
          <NavLink
            activeClassName="active"
            to=`$this.props.match.url/sub-page-name-2`>Sub Page 2</NavLink>
          <NavLink
            activeClassName="active"
            to=`$this.props.match.url/sub-page-name-3`>Sub Page 3</NavLink>
        </div>
        <HeaderBanner user=this.props.user />
        <div className="center-panel">
          <Route path=`$this.props.match.url/sub-page-name-1` component=SubPagePanel1 />
          <Route path=`$this.props.match.url/sub-page-name-2` component=SubPagePanel2 />
          <Route path=`$this.props.match.url/sub-page-name-3` component=SubPagePanel3 />
        </div>
      </div>
    )
  

我也删除了Switch，因为我没有将它用于我的子页面... :-S

更新：已创建一个显示子页面内容的工作示例的存储库

https://github.com/PocketNinjaDesign/so-sub-routes-answer

【讨论】：

你能把 youtube 视频的链接分享给我吗？我需要对此进行更多探索！

此解决方案无效。它仅将特定的 Route 组件呈现到整个浏览器窗口

@Nandeesh 添加了一个 repo 链接，显示了带有子页面内容的 React Router 4 示例，希望能回答您的问题 :-)

@Nandeesh 那里的情况如何。这回答了你的问题吗？

我只是按照你所说的做了。我启动了服务器，你的代码一切正常。如果我在我的中实现相同的东西，我不会得到对“this.props.match.url”的引用。我只是硬编码到“/dashboard/navigation-1”，即使那不起作用。

【参考方案2】：

是的，您可以在任意多个地方使用<Routes>。 <Router> 组件是您只能使用一次的组件。