React Router v6中如何在React组件内获取URL参数

你当前使用的是React Router v6版本（从Route配置的element属性可判断），该版本默认不会向类组件的props注入路由参数，可通过以下两种方式实现id参数获取：

方案1：自定义高阶组件适配Hook #

React Router v6移除了v5自带的withRouter高阶组件，你可以自己实现一个，把路由参数注入类组件props：

1. 首先实现高阶组件

// QuestionView.js顶部引入相关依赖
import { useParams } from 'react-router-dom';

// 自定义withRouter高阶组件
const withRouter = (Component) => {
  return (props) => {
    const params = useParams();
    return <Component {...props} params={params} />
  }
}

2. 组件中获取参数并修改导出逻辑

class QuestionView extends React.Component {     
    render() {
          const { questions, users, params } = this.props;
          const { id } = params;
          // 后续业务逻辑直接使用id即可
    }
}

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

方案2：路由定义处直接传参 #

如果不想单独封装高阶组件，也可以在App.js的路由定义处直接把参数传入组件：

1. 修改App.js路由配置

// App.js中引入useParams
import { useParams } from 'react-router-dom';

// 路由配置修改为如下
<Route 
  path="/question/:id" 
  element={<QuestionView params={useParams()} />} 
/>

2. 组件内直接从props取参数

class QuestionView extends React.Component {     
    render() {
          const { questions, users, params } = this.props;
          const { id } = params;
    }
}

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