解决react 路由传参

在React中，可以使用React Router来解决路由传参的问题。下面是一种常见的解决方案：

1. 使用react-router-dom库来安装和管理路由功能。可以使用以下命令来安装：

npm install react-router-dom

2. 在你的应用程序中引入`BrowserRouter`和`Route`组件。`BrowserRouter`用于包装整个应用程序，而`Route`用于定义路由。

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

const App = () => {
  return (
    <BrowserRouter>
      <Route path="/your-route" component={YourComponent} />
    </BrowserRouter>
  );
};

3. 在需要传递参数的组件上，可以使用路由的`params`或`query`来传递参数。

使用`params`传递参数的示例：

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

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

  return <div>{id}</div>;
};

使用`query`传递参数的示例：

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

const YourComponent = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const id = queryParams.get('id');

  return <div>{id}</div>;
};

4. 在路由链接中，可以通过将参数添加到链接的路径或查询字符串中来传递参数。

使用`params`传递参数的示例：

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

const YourComponent = () => {
  return (
    <Link to="/your-route/123">Link</Link>
  );
};

使用`query`传递参数的示例：

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

const YourComponent = () => {
  return (
    <Link to="/your-route?id=123">Link</Link>
  );
};

这样，你就可以在React中使用React Router来解决路由传参的问题了。具体的参数传递方式可以根据你的需求来选择。