如何使用react路由器设置嵌套路由

Question

我有一个父容器：

function Home() {
render (
<Router>
<Switch>
<Route exact path="/website" component={Website} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/website/web-one" component={WebOne} />
<Route path="/website/web-two" component={WebTwo} />
<Route path="/dashboard/dash-one" component={DashOne} />
<Route path="/dashboard/dash-two" component={DashTwo} />
</Switch>
</Router>
)
}

网站和仪表板都有自己的路线，我想根据url上的内容来呈现。以下是我迄今为止所做的：

//home
function Website(){
render (
<div>
<div>Welcome to Website page</div>
<Router>
<Switch>
<Route path="/website/web-one" component={WebOne} />
<Route path="/website/web-two" component={WebTwo} />
</Switch>
</Router>
</div>
)
}

//dashboard
function Dashboard(){
render (
<div>
<div>Welcome to Dashboard page</div>
<Router>
<Switch>
<Route path="/dashboard/dash-one" component={DashOne} />
<Route path="/dashboard/dash-two" component={DashTwo} />
</Switch>
</Router>
</div>
)
}

如何确保两个嵌套管线在各自的父管线上都能很好地显示，并且两个父管线的标题保持不变。

目前，我收到这个错误：

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

几个小时后，我修复了它，我所做的就是从Home的两个子组件中删除<Router>标记。因为这就像在另一个路由器里有一个路由器。

此外，我从主组件中删除了额外的Routes，并将它们写入各自的父组件中。

现在Home组件看起来像这样：

function Home() {
render (
<Router>
<Switch>
<Route exact path="/" component={Website} />
<Route path="/dashboard" component={Dashboard} />
</Switch>
</Router>
)
}

另外两条类似的子路径：

//home
function Website(){
render (
<div>
<div>Welcome to Website page</div>
<Switch>
<Route path="/website/one" component={WebOne} />
<Route path="/website/two" component={WebTwo} />
</Switch>
</div>
)
}

//dashboard
function Dashboard(){
render (
<div>
<div>Welcome to Dashboard page</div>
<Switch>
<Route path="/dashboard/one" component={DashOne} />
<Route path="/dashboard/two" component={DashTwo} />
</Switch>
</div>
)
}