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

Posted 2023-01-31

我正在创建仪表板页面，如果路由路径是/ 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 />
                </>
              )
            />```

答案

您应该去作曲。创建将组件放在一起的页面组件，然后将页面添加到路由器。

例如FavoritePage.js将是

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

类似其他页面

然后将在Router中拥有

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