如何在React Router中调用子组件前提取处理Route路径URL参数

根据你使用的React Router版本不同，有两种常用实现方式：

React Router v5 版本 #

方式1：使用useParams钩子（推荐） #

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

// 封装中间处理组件
const ProfileLoader = () => {
  // 直接提取路由参数
  const { username } = useParams();
  // 此处添加你的参数处理逻辑，比如格式化、校验、调用接口等
  const processedUser = username.trim().toLowerCase();
  return <Profile _user={processedUser} />
}

// 路由配置修改为
<Route path="/profile/:username">
  {!user ? 
  <Redirect to="/" /> : 
  <ProfileLoader />}
</Route>

方式2：使用Route的render属性 #

不需要单独封装组件的场景可以用这个写法：

<Route 
  path="/profile/:username"
  render={({ match }) => {
    if (!user) return <Redirect to="/" />
    // 从match对象中提取参数
    const rawUsername = match.params.username
    // 处理参数
    const processedUser = rawUsername.trim().toLowerCase()
    return <Profile _user={processedUser} />
  }}
/>

React Router v6 版本 #

v6已经移除了Redirect组件和render属性，调整后的写法如下：

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

const ProfileLoader = () => {
  const { username } = useParams();
  // 你的参数处理逻辑
  const processedUser = username.trim().toLowerCase();
  return <Profile _user={processedUser} />
}

// 路由配置
<Route 
  path="/profile/:username"
  element={!user ? <Navigate to="/" replace /> : <ProfileLoader />}
/>

注意：useParams属于React钩子，只能在组件内部调用，不能直接写在Route的属性根位置，不符合钩子调用规则。

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