react-routerV6 路由传递参数的三种方式

在React Router V6中，可以通过以下三种方式传递参数：

1. 使用URL路径参数（Path Parameters）：

   在路由路径中定义参数，使用冒号:后跟参数名的方式。

<Route path="/user/:id" element={<User />} />

在组件内部，可以使用useParams钩子获取参数值。

import { useParams } from 'react-router-dom';
 
function User() {
  const params = useParams();
  return <div>User ID: {params.id}</div>;
}

2. 使用查询字符串（Query Parameters）：

   在URL的查询部分传递参数，使用问号?后跟参数名和等号=以及参数值。

<Link to="/users?sort=asc">Sort Ascending</Link>

在组件内部，可以使用useSearchParams钩子获取查询参数。

import { useSearchParams } from 'react-router-dom';
 
function Users() {
  const [searchParams, setSearchParams] = useSearchParams();
  const sort = searchParams.get('sort');
  return <div>Sort: {sort}</div>;
}

3. 状态管理（State Management）：

   通过外部状态（如Redux或Context API）传递参数，不直接在路由中绑定。

// 假设使用Context API
const UserContext = createContext();
 
function Users() {
  const [userID, setUserID] = useState(null);
 
  return (
    <UserContext.Provider value={userID}>
      <button onClick={() => setUserID(123)}>User 123</button>
      <Route element={<UserDetail />} />
    </UserContext.Provider>
  );
}
 
function UserDetail() {
  const userID = useContext(UserContext);
  return <div>User ID: {userID}</div>;
}

以上三种方式是React Router V6中传递参数的主要方式。