react路由传参

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都提供了灵活的支持。