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处理。