深入了解 React Router DOM v6 的参数传递和导航

深入了解 React Router DOM v6 的参数传递和导航

React Router DOM v6 提供了一种强大的导航和路由管理机制，其中包括了参数传递和导航功能。本文将深入介绍 React Router DOM v6 中参数传递的三种方式：params、search 和 state，并介绍如何使用 useNavigate 实现页面导航功能。

1. Params 参数传递

Params 是一种通过 URL 路径中的参数来传递数据的方式。在 React Router DOM v6 中，可以通过定义路由的路径来使用 Params。

// 定义路由
<Route path="/users/:id" element={<UserDetail />} />

// 在组件中获取参数
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  // 使用 id 渲染用户详情
}

2. Search 参数传递

Search 参数是一种通过 URL 查询字符串中的参数来传递数据的方式。在 React Router DOM v6 中，可以通过 useSearchParams 钩子来获取 Search 参数。

// 获取 Search 参数
import { useSearchParams } from 'react-router-dom';

function SearchResults() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q');
  // 使用查询参数进行搜索
}

3. State 参数传递

State 参数是一种通过导航时传递的状态对象来传递数据的方式。在 React Router DOM v6 中，可以通过 useLocation 钩子来获取 State 参数。

// 导航并传递 State 参数
import { useNavigate } from 'react-router-dom';

function navigateToDetails() {
  const navigate = useNavigate();
  navigate('/details', { state: { id: 1, name: 'John' } });
}

4. 使用 useNavigate 导航

useNavigate 是一个自定义钩子，用于在函数组件中执行导航操作。它返回一个函数，用于在应用中进行导航。

// 在组件中使用 useNavigate 导航
import { useNavigate } from 'react-router-dom';

function NavigationComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/about');
  }

  return (
    <button onClick={handleClick}>Go to About Page</button>
  );
}

通过上述方式，我们可以灵活地在 React Router DOM v6 中实现参数传递和页面导航，为应用程序提供了更好的用户体验和功能扩展性。

参考

• 深入了解 React Router DOM v6 的参数传递和导航
• params,search参数示例代码
• state参数示例代码
• useNavigate示例代码