如何在react路由器v6中呈现多个父组件包装到另一个多个元素中
如何在react路由器v6中呈现多个父组件包装到另一个多个元素中
提问于 2022-02-10 20:26:51
我正在创建一个在/中有多个组件的项目。所以我用碎片把它们包裹在一条路线上。现在从这些child组件中，一个是另一个组件的parent。
我怎样才能把他们安排到公路上？
资讯化
Browser Router在它的父组件中。- 我可以在主页上看到所有的4
Dashboard, Hero, List, Footer。在List - The路由器将像
/li/:liId/:olId的/li/1/1之后， - 我什么也得不到。我只能查看
/
代码
<Routes>
<Route path='/' element={
<>
<Dashboard />
<Hero />
<List>
<Route path="/li" element={<Hi />}>
<Route path="/:liId" element={<Hi />} >
<Route path="/:olId" element={<Hi />} />
<Route path="/i" element={<Info />} />
<Route path='/d' element={<Details />} />
</Route>
</Route>
<Route path='*' element={<Error />} />
</List>
<Footer />
</>
}>
</Route>
</Routes>解出
<Routes>
<Route
path='/*'
element={(
<>
<Dashboard />
<Hero />
<List>
<Outlet />
</List>
<Footer />
</>
)}
>
<Route path="/li/:liId" element={<Hi />}>
<Route path="/li/:liId/:olId" element={<Hi />}/>
<Route path="/li/:liId/i" element={<Info />} />
<Route path="*" element={<Error />} />
</Route>
</Route>
</Routes>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-10 20:41:41
呈现嵌套路由的Route组件应指定尾部"/*"通配符以允许子路由路径匹配。
Route组件还应该只有Routes或另一个Route组件作为父组件。
您可以将嵌套路由包装在Routes组件中：
<Routes>
<Route
path='/*'
element={(
<>
<Dashboard />
<Hero />
<List>
<Routes>
<Route path="li" element={<Hi />}>
<Route path=":liId" element={<Hi />}>
<Route path=":olId" element={<Hi />} />
<Route path="i" element={<Info />} />
<Route path="d" element={<Details />} />
</Route>
</Route>
<Route path='*' element={<Error />} />
</Routes>
</List>
<Footer />
</>
)}
/>
</Routes>
或为要呈现到的嵌套Outlet组件呈现一个Route。
<Routes>
<Route
path='/'
element={(
<>
<Dashboard />
<Hero />
<List>
<Outlet /> // <-- nested `Route`s render out here
</List>
<Footer />
</>
)}
>
<Route path="li" element={<Hi />}>
<Route path=":liId" element={<Hi />}>
<Route path=":olId" element={<Hi />} />
<Route path="i" element={<Info />} />
<Route path="d" element={<Details />} />
</Route>
</Route>
<Route path='*' element={<Error />} />
</Route>
</Routes>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71071843
复制相关文章
相似问题
腾讯云开发者
