如何使用React Router传递参数？

React Router是一个用于构建单页面应用的库，它提供了一种方便的方式来管理应用程序的路由。在React Router中，可以使用参数来传递数据给组件。

要使用React Router传递参数，可以通过以下步骤：

安装React Router：首先，确保已经安装了React和React Router库。可以使用npm或yarn进行安装。
定义路由：在应用程序的路由配置文件中，使用<Route>组件来定义路由。例如：

import { BrowserRouter as Router, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Route path="/user/:id" component={User} />
    </Router>
  );
};

在上面的例子中，定义了一个名为/user/:id的路由，其中:id是一个参数。

接收参数：在目标组件中，可以使用useParams钩子或withRouter高阶组件来接收参数。例如：

使用useParams钩子：

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

const User = () => {
  const { id } = useParams();

  return <div>User ID: {id}</div>;
};

使用withRouter高阶组件：

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

const User = ({ match }) => {
  const { id } = match.params;

  return <div>User ID: {id}</div>;
};

export default withRouter(User);

在上面的例子中，useParams钩子或withRouter高阶组件都可以从URL中获取参数，并将其作为属性传递给组件。

导航到带参数的路由：要导航到带参数的路由，可以使用<Link>组件或history.push方法。例如：

使用<Link>组件：

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

const Home = () => {
  return (
    <div>
      <Link to="/user/123">User 123</Link>
    </div>
  );
};

使用history.push方法：

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

const Home = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push('/user/123');
  };

  return (
    <div>
      <button onClick={handleClick}>Go to User 123</button>
    </div>
  );
};

在上面的例子中，点击链接或按钮将导航到带参数的路由/user/123。

这是使用React Router传递参数的基本步骤。根据具体的需求，还可以使用其他React Router提供的功能来处理更复杂的路由参数传递和管理。