菜鸟教程
教程 react tutorial

路由传参（params、query）

路由参数（params）

路径参数（params）是 React Router 提供的一种通过 URL 路径传递数据的方式。您可以在 Route 中定义动态路径，然后通过 useParams 钩子访问这些参数。

示例

首先，定义一个带有动态路径的路由：

jsx 
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { UserProfile } from './UserProfile';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

`

在这个示例中，:id 就是一个动态的路径参数。当用户访问 /user/123 时，123 会被传递到目标组件 UserProfile 中。

在组件内部，您可以使用 useParams 钩子来访问这个参数：

jsx 
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

此时，当路径是 /user/123 时，id 的值就是 123。

查询参数（query）

查询参数（query）通过 URL 的查询字符串传递数据。查询字符串以 ? 开头，多个参数通过 & 分隔。您可以使用 useLocation 钩子来访问查询参数。

示例

假设您有一个 URL 如下：

代码 
/search?query=react&page=1

您可以在 Route 中设置路径为 /search，并使用 useLocation 钩子获取查询参数：

jsx 
import { useLocation } from 'react-router-dom';

function SearchPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query');
  const page = queryParams.get('page');
  
  return (
    <div>
      <h2>Search Results</h2>
      <p>Query: {query}</p>
      <p>Page: {page}</p>
    </div>
  );
}

总结

  • 路径参数（params） 是 URL 路径的一部分，通常用于动态匹配和传递重要的标识符。
  • 查询参数（query） 是通过 URL 查询字符串传递的额外信息，通常用于过滤或分页等场景。

这两种方式可以根据应用的需求灵活地组合使用，实现更复杂的路由传参。

相关内容