React Router v6如何获取当前路由参数并传递给组件

方法1：在目标组件内使用useParams钩子（推荐） #

这是React Router v6官方推荐的方式，无需在路由配置中手动传递参数。

函数组件场景 #

修改Food组件，直接通过useParams获取路径参数：

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

function Food() {
  const { name } = useParams(); // 解构路径中定义的`:name`参数
  return <div>当前食物：{name}</div>;
}

export default Food;

此时App组件的路由配置保持简洁即可：

<Route path="/food/:name" element={<Food />} />

类组件场景 #

由于useParams是钩子，仅支持函数组件。如果Food是类组件，可以通过自定义高阶组件（HOC）包裹来传递参数：

// 自定义高阶组件，用于传递路由参数
import { useParams } from 'react-router-dom';

function withParams(Component) {
  return function WrappedComponent(props) {
    const params = useParams();
    return <Component {...props} {...params} />;
  };
}

// 类组件Food
class Food extends Component {
  render() {
    return <div>当前食物：{this.props.name}</div>;
  }
}

// 用高阶组件包裹后导出
export default withParams(Food);

App组件的路由配置同样只需写<Route path="/food/:name" element={<Food />} />。

方法2：在路由配置中通过包裹组件传递参数 #

如果需要在路由层面显式传递参数，可以通过匿名组件或封装的中间组件获取参数后再传递给Food：

import React from 'react';
import { Routes, Route, useParams} from 'react-router-dom';

export default class App extends Component {
  render() {
    // 用函数组件作为中间层获取参数
    const FoodWrapper = () => {
      const { name } = useParams();
      return <Food name={name} />;
    };

    return (
      <div className="App">
        <Routes>
          <Route path="/food/:name" element={<FoodWrapper />} />
        </Routes>
      </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者lgriffin