如果问号附加到 url，则反应路由器 v6 不起作用

Question

所以我现在的情况是，我有一个 link 通过我们的后端发送给他试图访问以重置密码的用户，link 的路径是： https://randomwebsite.com/reset-password/?uidb64=value&token=value 我的路由组件和 404 路由组件如下所示：

    <Route
      path="/reset-password/?:uidb64:token"
      element={<ResetPasswordCodeConfirmation />}
    />

    <Route path="*" element={<Error404Page />} />

如果我尝试访问上面的 link (https://randomwebsite.com/reset-password/?uidb64=value&token=value)，我会进入 404 页面，如果我从我的路线和 link 中删除问号，它就可以工作很好，link 转到重置密码组件，但我需要告诉 React 路由器它需要接受一个问题，因为这是到达用户的 link，知道吗？

Answer 1

您不需要在路由路径中添加问号。 React Router 会自动解析查询参数，然后你可以使用和验证查询参数，如下所示：

import { useSearchParams } from 'react-router-dom'
...
const [queryParams, setQueryParams] = useSearchParams()
if (!queryParams.uidb64 && !queryParams.token) {
    return <h1>Error</h1>
}
...

或者类似的东西。这只是一个例子。

Answer 2

这里有两点不同：

查询参数（您的后端为此端点设置的）这意味着如果您有多个值

?

&

路由参数（您尝试使用字符 : 添加到您的路由组件中），它实际上意味着完全不同的路由 / 分隔它，例如：<Route path="/reset-password/:token" /> 表示全部 https://randomwebsite.com/reset-password/AnyThingHereThatYouCanAccessLaterAsToken

因此，您的 link 应该保持不变，并且您的 Route 组件应该如下所示：

    <Route
      path="/reset-password"
      element={<ResetPasswordCodeConfirmation />}
    />

我认为这个 link 是相同情况的一个很好的例子。

如果问号附加到 url，则反应路由器 v6 不起作用

react router v6 doesn't work if a question mark is attached to url

reactjs

react-router