如何使用 React-router 渲染多个组件相同的路由路径

Question

我正在创建一个仪表板页面，如果路由路径是 /dashboard，我总是希望在其中显示一个侧边栏组件。但我也希望 /dashboard 也渲染另一个组件。

我想要达到的目标：

• 路由路径：/dashboard 应该呈现Sidebar.js + Overview.js 组件。
• 路由路径：/dashboard/account 应该呈现Sidebar.js + Account.js 组件。
• 路由路径：/dashboard/favorites 应该呈现Sidebar.js + Favorites.js 组件。
• 等等……

有人可以指出正确的方向如何实现这一目标吗？我无法理解它......

请参阅下文以更了解我想要的效果：

这是我迄今为止尝试过的：

              <Route path="/" exact component={Home} />
              <Route path="/podcast/:podId/:podName" component={Podcast} />
              <Route exact path="/categori/:categoryName" component={Category} />
              <AuthRoute path="/login" component={Login} />
              <AuthRoute path="/signup" component={Signup} />
            </Switch>
            <Route
              path="/dashboard"
              render={({ match: { url } }) => (
                <>
                  <Route path={`${url}/`} component={Sidebar} />
                  <Route path={`${url}/`} component={Overview} />
                  <Route path={`${url}/favorites`} component={Favorites} />
                </>
              )}
            />```

Answer 1

你应该去作曲。创建将组件组合在一起的页面组件并将页面添加到路由器。

例如FavoritePage.js 将是

<div>
  <Sidebar />
  <Favorites>
</div>

其他页面也是如此

然后在路由器中你将拥有

<Route path={`${url}/`} component={OverviewPage} />
<Route path={`${url}/favorites`} component={FavoritesPage} />

或者，如果您希望侧边栏是静态的。参考https://reacttraining.com/react-router/web/guides/quick-start

   <Router>
      <div>
        <Sidebar />
        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/overview">
            <Overview />
          </Route>
          <Route path="/overview">
            <Favorites />
          </Route>
          <Route path="/">
            <Overview />
          </Route>
        </Switch>
      </div>
    </Router>