React中如何向Route路由的子组件传递路径参数

React Router v6（当前主流版本）实现方式 #

v6 支持直接在路由路径中为动态参数绑定正则校验规则，你可以按照以下方式实现：

• 首先修改路由path定义，把需要匹配的路径段定义为动态参数并绑定取值规则
• 直接在路由组件处获取匹配的参数传递给子组件

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

// 路由配置
<Route 
  path="/:tab(register|login)" 
  element={<Register initial_tab={useParams().tab} />} 
/>

如果不想在路由配置中直接调用hooks，也可以抽离一层封装组件：

const RegisterWrapper = () => {
  const { tab } = useParams();
  return <Register initial_tab={tab} />
}

// 路由配置简化为
<Route path="/:tab(register|login)" element={<RegisterWrapper />} />

以上实现会自动识别用户访问的是/register还是/login，把对应的register/login字符串传递给initial_tab属性。

React Router v5 实现方式 #

v5 可以通过Route的render属性获取路由匹配对象，直接传递参数：

<Route
  exact
  path="/:tab(register|login)"
  render={({ match }) => <Register initial_tab={match.params.tab} />}
/>

内容的提问来源于stack exchange，提问作者Bear Bile Farming is Torture