我有一条路由:
<Route path="/users/:userId?/:edit?" element={(<Users />)} />
Users是一个布局组件，我根据参数确定要渲染什么.
我在这个组件中有2个 Select :
- 如果没有参数，则渲染
UsersList个组件. - 如果有参数
userId，则渲染UserPage组件.
UserPage里面我有模拟逻辑:
- 如果除了
userId之外没有参数，则渲染UserPage组件. - 如果包含参数
'edit'，则渲染UserEditPage组件.
现在我希望叉出UserPage个参数渲染
if (editParam) return <UserEditPage />
if (bookmarkParam) return <UserBookmarks />
return justRenderUserPage()
所以在我看来，这条路由看起来像是
<Route path="/users/:userId?/(:edit? || :/bookmakr?)" element={(<Users />)} />
然而，这不是工作 case .
我有一些 idea ，比如创建2条类似的路由:
<Route path="/users/:userId?/:edit?" element={(<Users />)} />
<Route path="/users/:userId?/:bookmark?" element={(<Users />)} />
或缩短路由
<Route path="/users/:userId?" element={(<Users />)} />
并在UserPage个组件内创建2条额外路由(创建子布局).
但这两种方式在我看来都有点丑陋，所以我想知道--对于此类任务有什么"最佳实践"吗？我想看看经验丰富的开发者会如何做.