React路由传参
在React应用中,路由传参是一个常见的需求。通过React Router库,我们可以轻松实现组件之间的参数传递。解决这一问题的核心在于使用useParams
、props.match.params
或search
查询字符串等方式从URL中获取参数。
以下是几种实现React路由传参的思路和具体代码示例。
1. 使用 useParams 获取动态路径参数
React Router v5及以上版本提供了useParams
钩子,用于捕获URL中的动态参数。例如,我们可以通过:id
定义动态路径,并在目标组件中使用useParams
提取参数。
步骤:
1. 定义带有动态参数的路由。
2. 在目标组件中使用useParams
读取参数。
代码示例:
javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';</p>
<p>function App() {
return (
<div>
用户123
</div>
);
}</p>
<p>function User() {
const { id } = useParams(); // 获取URL中的:id参数
return <h2>当前用户ID: {id}</h2>;
}</p>
<p>export default App;
2. 使用 props.match.params 获取动态路径参数
在React Router v5及更早版本中,可以通过props.match.params
访问动态参数。此方法适用于类组件或函数组件未使用钩子的情况。
代码示例:
javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';</p>
<p>class App extends React.Component {
render() {
return (
<div>
产品456
</div>
);
}
}</p>
<p>function Product(props) {
const productId = props.match.params.id; // 通过props.match.params获取参数
return <h2>当前产品ID: {productId}</h2>;
}</p>
<p>export default App;
3. 使用查询字符串 (Query String) 传参
除了路径参数外,还可以通过查询字符串传递参数。React Router不直接提供解析查询字符串的功能,但可以结合URLSearchParams
来实现。
步骤:
1. 在跳转时添加查询字符串。
2. 在目标组件中解析查询字符串。
代码示例:
javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';</p>
<p>function App() {
return (
<div>
查看详细信息
</div>
);
}</p>
<p>function Details() {
const location = useLocation();
const searchParams = new URLSearchParams(location.search);</p>
<p>const name = searchParams.get('name'); // 获取查询参数name
const age = searchParams.get('age'); // 获取查询参数age</p>
<p>return (
<div>
<h2>姓名: {name}</h2>
<h2>年龄: {age}</h2>
</div>
);
}</p>
<p>export default App;
4. 使用 state 或其他方式传递复杂数据
对于需要传递复杂对象或状态的情况,可以通过<Link>
的state
属性或全局状态管理工具(如Redux)实现。
代码示例:
javascript
import React from 'react';
import { BrowserRouter as Router, Route, Link, useLocation } from 'react-router-dom';</p>
<p>function App() {
const user = { id: 789, name: 'Alice' };</p>
<p>return (
<div>
<Link to={{ pathname: '/profile', state: { user } }}>查看用户资料
</div>
);
}</p>
<p>function Profile() {
const location = useLocation();
const user = location.state?.user;</p>
<p>if (!user) return <h2>无用户信息</h2>;</p>
<p>return (
<div>
<h2>ID: {user.id}</h2>
<h2>姓名: {user.name}</h2>
</div>
);
}</p>
<p>export default App;
以上是React路由传参的几种常见方式,开发者可以根据实际需求选择合适的方案。无论是动态路径参数、查询字符串还是状态传递,React Router都提供了灵活的支持。