当前位置：首页 > news >正文

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

news 来源：原创 2025/7/21 2:46:13

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

URL 路径参数：通过动态路由和 useParams 获取。
查询参数：通过 useLocation 获取 URL 查询字符串。
路由状态传递：通过 state 属性在导航时传递数据，不在 URL 中显示，使用 useLocation 获取。
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>;
}

1. URL 路径参数 (Path Parameters)

2. 查询参数 (Query Parameters)

3. 传递状态 (State via Navigation)

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

相关文章：

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