如何在重定向后向React Router首页路由传递:id参数？

当然可行！我给你两种实用的实现方案，你可以根据是否需要在URL中显示参数来选择：

方案一：通过URL查询参数传递（URL可见，刷新不丢失） #

这种方式会把id以查询参数的形式附加到首页URL（/?id=xxx），既保持了首页的基础路径，又能让Interface组件获取到参数，而且刷新页面后参数不会丢失。

1. 修改Redirect路由 #

把你的Redirect改成动态生成目标路径的形式，从原路由的match.params里拿到id，拼到查询参数中：

<Redirect 
  path="/join/:id" 
  to={({ match }) => ({
    pathname: '/',
    search: `?id=${match.params.id}`
  })} 
/>

2. 在Interface组件中获取id #

如果是函数组件，用useLocation钩子解析查询参数：

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

function Interface() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id'); // 拿到传递的id

  return (
    <div>
      {id && <p>当前获取到的ID：{id}</p>}
      {/* 其他组件内容 */}
    </div>
  );
}

如果是类组件，通过props.location获取：

import React from 'react';

class Interface extends React.Component {
  render() {
    const searchParams = new URLSearchParams(this.props.location.search);
    const id = searchParams.get('id');

    return (
      <div>
        {id && <p>当前获取到的ID：{id}</p>}
        {/* 其他组件内容 */}
      </div>
    );
  }
}

方案二：通过路由state传递（URL不可见，刷新丢失） #

如果你不想在URL中暴露id，可以用React Router的state属性传递参数，这种方式参数存在内存中，页面刷新后会丢失，但URL会严格保持为/。

1. 修改Redirect路由 #

<Redirect 
  path="/join/:id" 
  to={({ match }) => ({
    pathname: '/',
    state: { id: match.params.id }
  })} 
/>

2. 在Interface组件中获取id #

函数组件：

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

function Interface() {
  const { state } = useLocation();
  const id = state?.id; // 可选链避免state为undefined时报错

  return (
    <div>
      {id && <p>当前获取到的ID：{id}</p>}
      {/* 其他组件内容 */}
    </div>
  );
}

类组件：

import React from 'react';

class Interface extends React.Component {
  render() {
    const id = this.props.location.state?.id;

    return (
      <div>
        {id && <p>当前获取到的ID：{id}</p>}
        {/* 其他组件内容 */}
      </div>
    );
  }
}

注意事项 #

• 确保你的Switch组件中，Redirect的路由顺序正确，避免被其他路由拦截。
• 如果用查询参数方案，用户可以手动修改URL中的id，如果需要限制这种行为，可以在Interface组件中对id做合法性校验。

内容的提问来源于stack exchange，提问作者j.doe