Question

我有一个带有登录页面的应用程序，后跟一个仪表板页面。我在index.js中定义的路线是这样的：

<Router>
  <div>
    <Route exact path="/" component={Login}/>
    <Route path="/dashboard" component={Dashboard} />
  </div>
</Router>

Dashboard.js：

return (
  <div>
    <Header/>
    <Footer/>
    <Switch>
     <Route path="/dashboard/content1" component={content1} />
     <Route path="/dashboard/content2" component={content2} />
    </Switch>
  </div>
);

Dashboard组件正在渲染其3个子组件。 Header，Footer和Content1。我希望信息中心组件默认呈现Content1（即当网址为/dashboard时）以及网址为/dashboard/content1时，并且当网址为content2时应该呈现/dashboard/content2 Header。 Footer＆amp;应保留Dashboard个组件。请建议unzip组件的配置以实现相同的目标。

Answer 1

在React-router v4中，您在组件中提供路由，因此您可以按如下方式编写路由

<Router>
  <div>
    <Route exact path="/" component={Login}/>
    <Route path="/dashboard" component={Dashboard} />
  </div>
</Router>

然后在Dashboard Component渲染方法

中

render() {
    return (
        <div>
            {/* other content */}
            <Switch>
               <Route exact path="/dashboard" component={content1} />
               <Route path="/dashboard/content1" component={content1} />
               <Route path="/dashboard/content2" component={content2} />
            </Switch>
        </div>

    )

}

Answer 2

在编辑之前作为帖子答案的变体，您可以这样做（嵌套）：

<Router>
    <Header/>
    <Content1/>
    <Footer/>
      <Switch>
        <Route exact path="/" component={Login}/>
        <Route exact path="/dashboard" component={Dashboard} />
        <Route exact path="/dashboard/content1" component={content1} />
        <Route exact path="/dashboard/content2" component={content2} />
      </Switch>    
</Router>

Answer 3

React-Router的Switch组件呈现匹配的第一个东西，因此，如果您将没有路径的路径放在最后，那么如果没有其他路径匹配，它将呈现，基本上将其视为默认路径。像这样：

return (
    <div>
        <Header/>
        <Footer/>
        <Switch>
            <Route path="/dashboard/content2" exact component={Content2} />
            <Route component={Content1} />
        </Switch>
    </div>
);

我发现渲染组件而不是路由也可以工作，虽然我不知道它是否得到官方支持。

return (
    <div>
        <Header/>
        <Footer/>
        <Switch>
            <Route path="/dashboard/content2" exact component={Content2} />
            <Content1 />
        </Switch>
    </div>
);

如何使用react router v4执行动态组件渲染？

3 个答案: