沒有任何 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 />
};