React Router：带多动态参数的编程式重定向失效求助

看起来你的问题大概率是重定向后状态未清空导致的循环重定向，或是路径拼接时的小细节问题。我来一步步帮你排查和解决：

1. 核心问题：无限循环重定向 #

你的renderRedirect方法会在redirectTo存在时一直返回<Redirect>组件，而重定向后组件的state里redirectTo依然存在——这会导致浏览器反复尝试重定向，最终被浏览器拦截，看起来就像“重定向无效果”。

推荐解决方案：改用history.push直接跳转 #

类组件可以通过withRouter高阶组件获取history对象，直接调用push方法跳转，这样不需要依赖状态管理，也不会有循环问题：

import { BrowserRouter, Route, Switch, withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  // 直接用history.push跳转，无需维护redirectTo状态
  goTo(redirectTo) {
    // 处理路径开头的斜杠，避免重复拼接出现//onboarding/xxx的错误路径
    const targetPath = redirectTo.startsWith('/') ? redirectTo : `/${redirectTo}`;
    this.props.history.push(targetPath);
  }

  render() {
    return (
      <BrowserRouter>
        <div className={`App ${ window.location.pathname !== '/admin' ? 'view' : '' }`}>
          <SchedulePanel />
          <img className="voxpop-logo" src={VoxPopLogo} alt="logo" />
          <Switch>
            <Route path="/onboarding/:eventId/:groupId" exact component={OnboardingView} />
            {/* 其他路由保持不变 */}
            <Route path="/profile" exact component={ProfileView} />
            <Route path="/questions" exact component={QuestionsView} />
            <Route path="/searching" exact component={SearchingView} />
            <Route path="/match" exact component={MatchView} />
            <Route path="/chat" exact component={ChatView} />
            <Route path="/offboarding" exact component={OffboardingView} />
            <Route path="/admin" exact component={AdminView} />
            <Route path="/no-match" exact component={NoMatch} />
            <Route path="/dev" exact component={Dev}/>
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

// 用withRouter包裹组件，注入history对象
export default withRouter(YourComponent);

2. 如果坚持使用<Redirect>组件 #

如果你还是想用Redirect的方式，必须在重定向后清空redirectTo状态。可以在组件的componentDidUpdate里检查当前路径是否和目标路径一致，一致就清空状态：

componentDidUpdate() {
  const { redirectTo } = this.state;
  if (redirectTo) {
    const targetPath = redirectTo.startsWith('/') ? redirectTo : `/${redirectTo}`;
    // 检查当前路径是否已经是目标路径，是就清空状态
    if (this.props.location.pathname === targetPath) {
      this.setState({ redirectTo: null });
    }
  }
}

renderRedirect() {
  const { redirectTo } = this.state;
  if (!redirectTo) return null;
  const targetPath = redirectTo.startsWith('/') ? redirectTo : `/${redirectTo}`;
  return <Redirect to={targetPath} />;
}

注意：这种方式需要用withRouter包裹组件，才能获取location属性。

3. 额外检查：路径拼接是否正确 #

确保你的redirectTo参数没有重复的斜杠——比如如果redirectTo已经是/onboarding/xxx/xxx，那/${redirectTo}会变成//onboarding/xxx/xxx，这会导致路径错误。上面的代码已经用startsWith('/')判断处理了这种情况。

另外你提到用Link组件也无效，检查一下Link的to属性是否正确：

<Link to={`/onboarding/${eventId}/${groupId}`}>跳转到引导页</Link>

如果直接访问URL正常，那这个Link应该是有效的，可能之前是和Redirect一样的状态问题导致的误解。

内容的提问来源于stack exchange，提问作者Arne Oldenhave