React组件生命周期早期如何实现重定向？（React Router 4.0+Redux）

Hey Frank, 别慌！我刚好用React Router 4搭配Redux做过类似的旧URL重定向需求，给你几个亲测有效的方案，你可以挨个试试：

方案1：用React Router的<Redirect>组件做全局路由匹配 #

这是最直接的方式，你只需要在路由配置里先添加旧URL的匹配规则，一旦匹配到就直接重定向到新地址。

举个例子，如果你的旧URL是/old-post/:postId，新URL是/new/articles/:postId，可以这么写：

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

// 在你的根路由组件中
<Switch>
  // 优先匹配旧路由，匹配到就重定向
  <Route path="/old-post/:postId" render={({ match }) => (
    <Redirect to={`/new/articles/${match.params.postId}`} exact />
  )} />
  
  // 新的正常路由
  <Route path="/new/articles/:postId" component={ArticleDetail} exact />
  <Route path="/home" component={Home} />
  // ...其他路由配置
</Switch>

如果是批量的旧路径（比如所有/old/*开头的都要转到/new/*），可以用正则来匹配调整，比如把path设为/old/:rest*，然后to设为/new/${match.params.rest}。

方案2：结合Redux中间件处理（适合需要业务状态判断的场景） #

如果你的重定向逻辑需要结合Redux里的状态（比如用户登录状态、特定业务标记），可以写个自定义中间件监听路由变化，自动触发重定向。

首先确保你用了connected-react-router（这个包是React Router 4+和Redux结合的最佳实践，比旧的react-router-redux更适配），然后写中间件：

import { push } from 'connected-react-router';

// 自定义重定向中间件
const redirectOldUrlsMiddleware = store => next => action => {
  // 监听路由变化的action（connected-react-router的标准action类型）
  if (action.type === '@@router/LOCATION_CHANGE') {
    const { pathname } = action.payload.location;
    
    // 判断是否是需要重定向的旧路径
    if (pathname.startsWith('/old-section')) {
      // 替换旧路径前缀为新前缀
      const newPath = pathname.replace('/old-section', '/new/section');
      // 触发路由跳转的Redux action
      store.dispatch(push(newPath));
    }
  }
  
  return next(action);
};

export default redirectOldUrlsMiddleware;

然后把这个中间件加到你的Redux Store的中间件数组里，就能全局监听并处理旧URL的重定向了。

方案3：单个组件内处理（适合特殊场景） #

如果只有某个特定的旧组件对应的URL需要重定向，也可以在组件的生命周期里直接处理：

import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

class OldProfilePage extends React.Component {
  componentDidMount() {
    // 也可以用history直接跳转
    this.props.history.push(`/new/profile/${this.props.match.params.userId}`);
  }

  render() {
    // 或者直接返回Redirect组件，更简洁
    return <Redirect to={`/new/profile/${this.props.match.params.userId}`} exact />;
  }
}

// 用connect包裹，拿到history对象
export default connect()(OldProfilePage);

不过这种方式不如全局路由配置优雅，只适合个别特殊的重定向场景。

几个额外提醒 #

• 一定要用<Switch>包裹路由，这样只会匹配第一个符合规则的路由，避免旧路由和新路由同时被匹配的问题。
• 如果是生产环境，记得在服务器端也配置对应的重定向规则（比如Nginx、Apache），因为用户直接访问旧URL时，服务器先返回页面，前端再处理重定向会有短暂的延迟，服务器端重定向更高效也更友好。
• 如果你用的是HashRouter（URL带#），上面的所有方案都同样适用，只需要调整对应的path规则即可。

如果试过这些方法还有问题，比如某个方案报错或者不符合你的场景，可以把具体的错误信息或者需求细节补充出来，我再帮你调整~

内容的提问来源于stack exchange，提问作者Frank M