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

我正在使用ReactJS创建一个应用程序。我正在使用

react router dom

中的react router 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的位置写入任何内容，它将仅为整个浏览器窗口呈现该组件。 有没有办法在应用程序的多个位置使用路由器？如果是，我如何实施？如果没有，最好的解决方案是什么？ 据我所见，路由器将堆叠在应用程序中的一个位置

---

提前感谢。

是的，您可以在任何地方使用

<代码>组件是您只能使用一次的组件。

我最近在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>
    )
  }
}

从“react router dom”导入{NavLink，Route}；
类视口扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
第1分页
第2分页
第3分页
)
}
}

我也删除了

开关

，因为我没有将其用于我的子页面…：-

更新：创建了一份回购协议，显示子页面内容的工作示例

---

当然，您可以使用那里的路线。查看react-router-dom中交换机的文档。请将youtube视频的链接分享给我好吗？我需要对此进行更多的探索！这个解决方案不起作用。它仅将该特定管线组件渲染到整个浏览器window@Nandeesh添加了一个repo链接，显示React Router 4的子页面内容示例，希望能回答您的问题：-）@Nandeesh您在那里过得怎么样。这回答了你的问题吗？我刚才照你说的做了。。我启动了服务器，在您的代码中一切正常。如果我在我的系统中实现了相同的东西，我就不会得到“this.props.match.url”的引用。我只是硬编码到“/dashboard/navigation-1”，即使这样也不行。