如何在v6中创建带有get参数的路由?

Question

我有一些路由，除了需要两个不同的id，其中一些需要作为get参数转发，如何在当前版本的React Router Dom v6中做到这一点?

路径:

path='/shorts/:userShortId?&ab_channel=*'
path='/watch?v=*&ab_channel=*'

代码:

export default function App() {
return (
<BrowserRouter basename='/'>
<GlobalStyle />
<Routes>
<Route path='/' element={<HomePage />} />
<Route path='/login' element={<HomePage />} />
<Route
path='/shorts/:userShortId?&ab_channel=*'
element={<HomePage />}
/>
<Route path='/watch?v=*&ab_channel=*' element={<HomePage />} />
<Route path='/feed'>
<Route path='subscriptions' element={<HomePage />} />
<Route path='library' element={<HomePage />} />
</Route>
<Route path='/channel/:userChannelId' element={<HomePage />}>
<Route path='videos' element={<HomePage />} />
<Route path='playlists' element={<HomePage />} />
<Route path='community' element={<HomePage />} />
<Route path='channels' element={<HomePage />} />
<Route path='about' element={<HomePage />} />
</Route>
<Route path='*' element={<NotFoundPage />} />
</Routes>
</BrowserRouter>
);
}

Answer 1

从我一直在做的测试和看文档的例子，似乎你不需要在路由定义中定义查询参数。你只需要path和path variables (:something)。然后，在组件内部，你可以使用react routeruseSearchParams钩子从URL中检索参数。

export default function App() {
return (
<BrowserRouter basename="/">
<Routes>
<Route path="/" element={<h1>Home</h1>} />
<Route path="/login" element={<h1>Login</h1>} />
<Route path="/shorts/:userShortId" element={<Shorts />} />
<Route path="/watch" element={<h1>watch</h1>} />
...
</Routes>
</BrowserRouter>
);
}

例如，在Shorts组件中，您可以使用

function Shorts() {
const [searchParams] = useSearchParams();
useEffect(() => {
const paramsAsObject = Object.fromEntries([...searchParams]);
console.log(paramsAsObject);
}, [searchParams]);
return <h1>shorts</h1>;
}