Question

我正在使用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>
    )

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

提前致谢。

Answer 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

至于教程，我完全失去了它，因为我在Xbox One youtube上看到它不是我的普通帐户而且孩子用它来观看Blippi和Men先生，所以它＆＃ 39;不见了：-S

Answer 2

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

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

2 个答案: