我有一对夫妇的网址,我需要他们被路由到两个不同的组成部分。
example.com/xyz/2023-03-23 -〉组件A
example.com/xyz/2023-03-23T09:00:00Z?timezone=Asia/Calcutta -〉组件B
<BrowserRouter>
<Routes>
<Route
path={`${path}/:date?`}
exact
element={ <ComponentA /> }
/>
<Route
path={`${path}/:date'T'*`}
exact
element={ <ComponentB /> }
/>
</Routes>
</BrowserRouter>
看起来我无法使用react router实现上述功能,因为不允许使用部分动态段。https://reactrouter.com/en/main/route/route#splats
如果我做条件渲染会增加代码的复杂性,有什么建议吗?
1条答案
按热度按时间sxpgvts31#
Route
路径不支持部分段匹配,要么全匹配,要么全不匹配。请参阅动态段文档。您已经应用了条件呈现,这就是
react-router
和路由所做的,基于当前URL路径有条件地呈现内容。这里的建议是在"/:date?"
上呈现单个路由,在date
参数中收集整个动态段,并在组件中的date
路径参数上运行REGEX。示例: