如何在 React-router 中区分路由路径中的查询参数

Question

这是我的路线代码：

<Switch>{createRoutes()}</Switch>

const createRoutes = () =>
  Routes.map(({ component: Component, urls }) =>
    urls.map((url) => (
      <Route
        path={url}
        exact
        render={() => <Component/>}
      />
    )),
  );
  
const Routes = [
  {
    urls: ['/'],
    component: Home,
  },
  {
    urls: ['/test'],
    component: Test,
  },
];

而我想要的是，当url是'/test?x=1'匹配组件Test，当url是'/ test' 将匹配组件 Home。我怎样才能做到这一点？

Answer 1

react-router-dom只考虑URL的路径部分进行路由匹配，没有办法使用queryString来匹配路由。

您可以做的是创建一个组件来检查当前 location 对象的 search 属性并有条件地呈现适当的组件。

示例：

const TestWrapper = (props) => {
  const { search } = useLocation();

  switch (search) {
    case "":
      return <Home {...props} />;

    default:
      return <Test {...props} />;
  }
};

...

const routes = [
  {
    paths: ["/"],
    component: Home
  },
  {
    paths: ["/test"],
    component: TestWrapper
  }
];

此外，在 react-router-dom@5 中，Route 组件可以采用路径数组，因此您无需为 paths 数组中的每条路径显式映射路由。

const createRoutes = () =>
  routes.map(({ component: Component, paths }) => (
    <Route key={paths.join()} path={paths} exact component={Component} />
  ));

如何在 React-router 中区分路由路径中的查询参数

How can I differentiate query parameters in routing paths in React-router

reactjs

react-router