react动态路由如何取值
动态路由参数获取方式
在React中，动态路由参数通常通过路由库提供的钩子或props获取，具体取决于使用的路由库（如React Router v5/v6）。以下是常见方法：
React Router v6的useParams钩子
使用useParams钩子直接从URL中提取动态参数：
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传递：
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>();
