当前位置：首页 > React

react route如何传参数

2026-03-31 13:45:06React

路由参数传递

在React Router中，可以通过URL路径传递参数。使用动态路由匹配，参数会被自动解析并可通过useParams钩子获取。

定义带参数的路由：

<Route path="/user/:id" element={<User />} />

在组件中获取参数：

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

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

查询参数传递

通过URL查询字符串传递参数，使用useSearchParams钩子获取和修改查询参数。

在组件中使用查询参数：

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

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');

  return (
    <div>
      Search Query: {query}
      <button onClick={() => setSearchParams({ q: 'new' })}>
        Update
      </button>
    </div>
  );
}

状态参数传递

通过navigate函数的state选项传递参数，这些参数不会显示在URL中，但可以通过useLocation钩子获取。

react route如何传参数

传递状态参数：

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

function Home() {
  const navigate = useNavigate();

  return (
    <button 
      onClick={() => navigate('/profile', { state: { fromHome: true } })}
    >
      Go to Profile
    </button>
  );
}

接收状态参数：

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

function Profile() {
  const location = useLocation();
  const { fromHome } = location.state || {};

  return <div>{fromHome ? 'From Home' : 'Not from Home'}</div>;
}

编程式导航传递参数

通过useNavigate钩子进行编程式导航时，可以传递参数。

传递路径参数：

react route如何传参数

const navigate = useNavigate();
navigate('/user/123');

传递查询参数：

navigate('/search?q=react');

传递状态参数：

navigate('/profile', { state: { user: 'admin' } });

获取路由参数

在类组件中获取路由参数，可以使用withRouter高阶组件或通过props获取。

使用withRouter：

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

class User extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return <div>User ID: {id}</div>;
  }
}

export default withRouter(User);

在函数组件中，推荐使用useParams、useSearchParams和useLocation钩子来获取各种类型的参数。