没有任何 url queryString 参数时 React Router v6 重定向

Question

当 URL 没有任何 queryString 参数（ "/domain/search" ）时，我需要路由器重定向到页面"/" 。 但如果它有任何内容，例如"/domain/search?keyword=something&page=1" ，它应该继续渲染组件Movies 。

我下面的代码不起作用，即使 URL 有一些 queryString 参数，它仍然会重定向到"/" 。

请帮助解决这个问题。

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Search />} />
    <Route path="search" element={<Navigate to="/" />} />
    <Route path="search/*" element={<Movies />} />
  </Route>
</Routes>

Answer 1

您必须在Movies组件中使用useSearchParams来读取 URL 中的查询字符串：

1. 路线：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Search />} />
    <Route path="search" element={<Movies />} />
  </Route>
</Routes>

2. Movies组件：

import { Navigate, useSearchParams } from "react-router-dom";


function Movies(props) {

  const [searchParams, setSearchParams] = useSearchParams();

  const page = searchParams.get("page");
  const otherParam = searchParams.get("otherParam");

  if(!page && !otherParam) {
    return <Navigate to="/" replace />
  }

  // the rest of your component
  ...

}

或使用URLSearchParams.keys()

import { Navigate, useSearchParams } from "react-router-dom";

function Movies() {
  const [searchParams, setSearchParams] = useSearchParams();

  if (![...searchParams.keys()].length) {
    return <Navigate to="/" replace />;
  }

  return <span>Movies page</span>;
}

Answer 2

react-router-dom和Route组件在匹配路由时不使用或引用 URL queryString。 这是路由组件应该检查​​的东西，或者您可以创建一个特殊的布局路由组件来处理。 代码应使用useSearchParams挂钩来访问searchParams并检查是否存在任何参数。

例子：

此示例是一个布局路由，它检查搜索参数条目数组长度，如果有条目，则为任何嵌套的Route组件呈现一个Outlet组件以呈现其element支撑，否则将呈现重定向回"/" 。

import { Navigate, Outlet, useSearchParams } from 'react-router-dom';

const ParamsRoute = () => {
  const [searchParams] = useSearchParams();
  
  return searchParams.entries().length
    ? <Outlet />
    : <Navigate to="/" replace />
};

用法：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Search />} />
      <Route element={<ParamsRoute />}>
        <Route path="search" element={<Movies />} />
      </Route>
  </Route>
</Routes>

也许您希望出现特定的 queryString 参数：

import { Navigate, Outlet, useSearchParams } from 'react-router-dom';

const ParamsRoute = ({ params = [] }) => {
  const [searchParams] = useSearchParams();
  
  return searchParams.entries().length                // has params
    && params.every(param => searchParams.get(param)) // has required params
      ? <Outlet />
      : <Navigate to="/" replace />
};