我使用的是 react-router v5
我的jsx:
<Home>
{ auth.user && <Sidebar /> }
<Main />
</Home>
我有以下两条路线:
"\" => public route
"\folder\:topicId" => private route
我在 <Sidebar />
组件中添加了这些路由。
根据这些路线,我想更新 <Main />
组件。
最初,我在 <App />
中有一个顶级开关用于此目的:
<Switch>
<Route exact path="/">
<Home/> // displays public content inside <Main />
</Route>
<PrivateRoute path="/folder">
<Home/> // display private content inside <Main /> depending on topic
</PrivateRoute>
</Switch>
但这会导致在从 <Home/>
导航到 "/"
时重新渲染整个 "/folder/:topicId"
,反之亦然。
所以,我想在 <Home />
内添加 switch,但是我怎样才能使 "/folder"
成为私有路由?
如何在这些路由之间切换,同时只更新 <Main />
组件?