react如何接受route带的参数
在React中，可以通过react-router-dom库提供的功能来接收路由参数。以下是几种常见的方法：
使用useParams钩子（React Router v5/v6）
useParams是React Router提供的钩子，用于获取动态路由参数。适用于函数组件。
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams(); // 假设路由路径为 `/user/:id`
return <div>User ID: {id}</div>;
}使用useSearchParams钩子（React Router v6）
useSearchParams用于获取URL查询参数（即?key=value形式的参数）。
import { useSearchParams } from 'react-router-dom';
function SearchPage() {
const [searchParams] = useSearchParams();
const query = searchParams.get('q'); // 获取URL中的`?q=xxx`
return <div>Search Query: {query}</div>;
}类组件中通过props.match获取（React Router v5）
在类组件中，可以通过props.match.params访问动态路由参数。
import { withRouter } from 'react-router-dom';
class UserProfile extends React.Component {
render() {
const { id } = this.props.match.params; // 路由路径为 `/user/:id`
return <div>User ID: {id}</div>;
}
}
export default withRouter(UserProfile);通过useLocation钩子获取路径信息
useLocation可以获取当前路由的路径、查询参数等信息。
import { useLocation } from 'react-router-dom';
function CurrentPath() {
const location = useLocation();
return <div>Current Path: {location.pathname}</div>;
}注意事项
- React Router v6移除了
withRouter，推荐使用钩子替代。 - 动态路由参数需要在路由配置中定义，例如
<Route path="/user/:id" element={<UserProfile />} />。 - 查询参数需手动解析，或通过
URLSearchParams处理。
