React Router Dom 无法识别带有查询参数的 url

Question

我面临使用查询参数和反应路由器 dom 的问题。

当我执行 API 调用并返回状态 200 时，我将用户重定向到带有 History.push 的结果页面。到目前为止一切正常。但是，当我在结果页面上并刷新页面时，我想使用带有查询参数的 url 来执行新搜索，不幸的是 React Router Dom 无法识别该 url 并重定向我。

应用程序.tsx

<PrivateRoute path="/search?value=:searchValue&type=:searchType">
  <Dashboard />
</PrivateRoute>
<Route path="/redirection" component={RedirectionPage} />
<Redirect to="/login" />

搜索.tsx

history.push({
  pathname: `/search?${formattedSearch
    .map((search) => `value=${search.value}&type=${search.type}`)
    .toString()
    .replace(",", "|")}`,
  state: search
});

这个history.push效果很好，可以将用户重定向到所需的页面。

但是，当我使用相同的 url 刷新页面时，React Router Dom 无法识别该路由，并且不会将我重定向到该组件。

你有什么想法 ？谢谢您并祝您度过愉快的一天。

Answer 1

路由匹配参数与 URL 查询字符串参数不同。

您需要从位置对象访问查询字符串。

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere',
  search: '?some=search-string', <-- query string
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

React-router-dom查询参数演示

他们创建了一个自定义useQuery钩子：

const useQuery = () => new URLSearchParams(useLocation().search);

对于您的用例，在呈现您想要的页面上Dashboard然后提取查询字符串参数。鉴于path='/search?value=:searchValue&type=:searchType'：

const query = useQuery();

const email = query.get('value');
const token = query.get('type');

基于类的组件？

如果Dashboard是基于类的组件，那么您将需要props.location在生命周期方法中自己访问和处理查询字符串。这是因为 React hooks 仅由功能组件有效使用。

componentDidMount() {
  const { location } = this.props;
  const query = new URLSearchParams(location.search);
  
  const email = query.get('value');
  const token = query.get('type');
  ...
}

关于路径的注意事项

path='/search?value=:searchValue&type=:searchType'

路径参数仅与 URL 的路径部分相关，您无法为 URL 的 queryString 部分定义参数。上面的路径相当于path='/search'fromreact-router-dom的视角。

<PrivateRoute path="/search">
  <Dashboard />
</PrivateRoute>