react函数式组件中的路由传参方式

React Router 提供了多种方式来传递路由参数：

1. URL 路径参数：通过动态路由和 useParams 获取。
2. 查询参数：通过 useLocation 获取 URL 查询字符串。
3. 路由状态传递：通过 state 属性在导航时传递数据，不在 URL 中显示，使用 useLocation 获取。
4. React Router v6 Navigate 和 useNavigate：用于程序性导航并传递状态。

路由传参。React Router 提供了多种方式来传递和获取路由参数。以下是几种常见的方式：

1. URL 路径参数 (Path Parameters)

当你在 URL 路径中使用动态部分时，可以通过 React Router 的 useParams hook 来访问这些参数。

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:id" component={User} />  //路由配置文件中的写法同理
      </Switch>
    </Router>
  );
}

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

function User() {
  const { id } = useParams();  // 获取 URL 中的动态参数 id
  return <div>User ID: {id}</div>;
}

2. 查询参数 (Query Parameters)

可以在 URL 中通过查询字符串传递参数，使用 useLocation hook 来访问查询参数。

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/search?query=react&sort=asc" component={SearchResults} />
      </Switch>
    </Router>
  );
}

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

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('query');  // 获取 query 参数
  const sort = queryParams.get('sort');    // 获取 sort 参数

  return (
    <div>
      <p>Query: {query}</p>
      <p>Sort: {sort}</p>
    </div>
  );
}

3. 传递状态 (State via Navigation)

React Router 提供了通过 history.push 或 Link 传递状态的方式，这种方式的参数不会显示在 URL 中。

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

function Home() {
  return (
    <div>
      <Link
        to={{
          pathname: "/about",
          state: { fromHome: true }
        }}
      >
        Go to About
      </Link>
    </div>
  );
}

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

function About() {
  const location = useLocation();
  const fromHome = location.state?.fromHome;

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

4. 传递参数使用 Navigate (React Router v6)

在 React Router v6 中，Navigate 组件用于程序性导航，并且可以携带状态

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

function Home() {
  return <Navigate to="/about" state={{ fromHome: true }} />;
}

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

function About() {
  const location = useLocation();
  const fromHome = location.state?.fromHome;

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

5. 传递参数通过 useNavigate（React Router v6）
 

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

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

  const goToAbout = () => {
    navigate('/about', { state: { fromHome: true } });
  };

  return <button onClick={goToAbout}>Go to About</button>;
}