React分步表单路由失效求助：Step2组件无法渲染

问题根源分析 #

你的代码里存在三个核心问题导致Step2无法渲染：

• 嵌套Router冲突：StartAProgram组件内嵌套了<Router>，但React Router应用应仅保留一个顶层Router（通常在项目入口文件中），嵌套Router会破坏路由上下文一致性，导致useHistory获取的路由环境与外层不匹配。
• 路径配置错误：
  • 内层Route的path未使用绝对路径（缺少开头的/），无法正确匹配全局路由。
  • ProgramName中history.push('./step2')使用相对路径，会跳转到/startAProgram/step1/step2，而非预期的/startAProgram/step2。
• Step1组件强制渲染：StartAProgram中直接渲染<ProgramName />，导致无论路由切换到step2/step3，Step1都会持续显示，覆盖后续步骤组件。

修复步骤及代码示例 #

1. 调整顶层路由配置（app.js）
   将分步表单的路由改为父路由匹配，让StartAProgram处理所有子步骤的路由：

// app.js中的路由
<Route path="/startAProgram" component={StartAProgram} />

2. 重构StartAProgram组件
   移除嵌套的<Router>，将所有步骤组件纳入Switch的路由配置：

function StartAProgram() {
  return (
    <WrapperDiv>
      <Stepper />
      <Switch>
        {/* Step1路由 */}
        <Route path="/startAProgram/step1" exact render={() => <ProgramName />} />
        {/* Step2路由 */}
        <Route path="/startAProgram/step2" exact render={() => <SetTargets />} />
        {/* Step3路由 */}
        <Route path="/startAProgram/step3" render={() => <ParticipationGuidelines />} />
      </Switch>
    </WrapperDiv>
  );
}

3. 修正ProgramName的跳转路径
   将相对路径改为绝对路径，确保跳转到正确的路由地址：

// ProgramName组件的handleOnSubmit函数
const handleOnSubmit = (data) => {
  sessionStorage.setItem('programName', Object.values(data));
  dispatch(submitStep1(data));
  history.push('/startAProgram/step2'); // 使用绝对路径
  console.log('next~');
};

4. 确保顶层Router存在（入口文件如index.js）
   确认项目入口已配置全局Router，例如：

import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

效果验证 #

完成上述修改后，提交Step1表单会正确跳转到/startAProgram/step2，SetTargets组件将正常渲染，同时Step1组件不会再在后续步骤页面显示。

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