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

Question

我在使用查询参数和 react 路由器 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 查询字符串参数不同。

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

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

React-router-dom query parameters demo

他们创建了一个自定义的 useQuery 钩子(Hook):

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 钩子(Hook)只能由功能组件有效使用。

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 部分定义参数。从react-router-dom的 Angular 来看，上述路径等同于path='/search'。

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