当前位置：首页 > React

react动态路由如何取值

2026-01-24 18:54:10React

动态路由参数获取方式

在React中，动态路由参数通常通过路由库提供的钩子或props获取，具体取决于使用的路由库（如React Router v5/v6）。以下是常见方法：

React Router v6的useParams钩子

使用useParams钩子直接从URL中提取动态参数：

react动态路由如何取值

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

function UserProfile() {
  const { id } = useParams(); // 假设路由为 /users/:id
  return <div>User ID: {id}</div>;
}

React Router v5的props.match

在v5中，动态参数通过组件的props.match.params传递：

react动态路由如何取值

function ProductDetail(props) {
  const { productId } = props.match.params; // 路由为 /products/:productId
  return <div>Product ID: {productId}</div>;
}

查询参数处理

若需获取URL查询参数（如?key=value），可使用useSearchParams（v6）或location.search（v5）：

// React Router v6
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q');
  return <div>Search Query: {query}</div>;
}

// React Router v5
function SearchPage(props) {
  const query = new URLSearchParams(props.location.search).get('q');
  return <div>Search Query: {query}</div>;
}

动态路由配置示例

定义动态路由时，路径需包含参数占位符：

// React Router v6
<Route path="/posts/:postId" element={<PostDetail />} />

// React Router v5
<Route path="/posts/:postId" component={PostDetail} />

注意事项

参数名需与路由定义中的占位符一致（如:id对应useParams().id）。
在v6中，类组件无法直接使用钩子，需通过高阶组件或包装函数转换。
类型安全建议：使用TypeScript时，可为参数定义类型：
```
type Params = { id: string };
const { id } = useParams<Params>();
```