React Router从v4升级到v5后onEnter失效，如何实现原功能？

问题描述 #

我有一段基于路由渲染React组件的代码，升级到React Router v5后，onEnter不再生效，请问如何在新版本中实现相同的路由验证与跳转功能？

原代码如下：

import Confirmation from './containers/Confirmation';

...

ReactDom.render(
  <Provider store={store}>
    <Router history={history} onUpdate={scrollToTop}>
      <Route exact path={BASKET} component={Main} />
      <Route path={DELIVERY} component={Main} />
      <Route path={ADDRESS} component={Main} />
      <Route path={COMPLETE} component={Confirmation} onEnter={checkOrderComplete(store)} />
    </Router>
  </Provider>,
  document.getElementById('checkout-target')
);

...

const checkOrderComplete = (store) => (nextState, replace) => {
  const state = store.getState();

  const orderCompleted = state.basket.pubOrderNumber !== '';

  if (!orderCompleted) {
    Logger.error(`incomplete order ➜ redirect to ${BASKET}`);

    replace({ pathname: BASKET });
  }
};

解决方案 #

React Router v5移除了onEnter这类路由钩子，推荐通过路由渲染逻辑封装、高阶组件或组件内部生命周期/钩子来实现路由验证，以下是三种可行方案：

方案1：使用Route的render属性直接处理验证 #

在路由配置中通过render属性包裹验证逻辑，符合条件再渲染目标组件：

// 修改路由配置
<Route 
  path={COMPLETE} 
  render={(props) => {
    const state = store.getState();
    const orderCompleted = state.basket.pubOrderNumber !== '';

    if (!orderCompleted) {
      Logger.error(`incomplete order ➜ redirect to ${BASKET}`);
      // 通过props.history实现跳转
      props.history.replace({ pathname: BASKET });
      return null; // 可替换为加载提示组件
    }

    // 验证通过，渲染目标组件并传递路由props
    return <Confirmation {...props} />;
  }} 
/>

方案2：封装高阶组件（HOC）复用验证逻辑 #

如果多个路由需要同类验证，可抽离成高阶组件提高复用性：

import { useEffect } from 'react';

// 定义验证高阶组件
const withOrderCompleteCheck = (WrappedComponent, store) => {
  return (props) => {
    const state = store.getState();
    const orderCompleted = state.basket.pubOrderNumber !== '';

    useEffect(() => {
      if (!orderCompleted) {
        Logger.error(`incomplete order ➜ redirect to ${BASKET}`);
        props.history.replace({ pathname: BASKET });
      }
    }, [orderCompleted, props.history]);

    if (!orderCompleted) {
      return null; // 或加载状态组件
    }

    return <WrappedComponent {...props} />;
  };
};

// 路由中使用HOC
<Route 
  path={COMPLETE} 
  component={withOrderCompleteCheck(Confirmation, store)} 
/>

方案3：在目标组件内部通过钩子处理验证 #

如果验证逻辑与组件强绑定，可直接在Confirmation组件内使用useEffect实现：

// 修改Confirmation组件
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux'; // 若使用Redux

const Confirmation = () => {
  const history = useHistory();
  // 用useSelector替代直接调用store.getState()，符合Redux最佳实践
  const pubOrderNumber = useSelector(state => state.basket.pubOrderNumber);

  useEffect(() => {
    if (!pubOrderNumber) {
      Logger.error(`incomplete order ➜ redirect to ${BASKET}`);
      history.replace({ pathname: BASKET });
    }
  }, [pubOrderNumber, history]);

  // 组件原有渲染逻辑
  return (
    <div>...</div>
  );
};

// 路由配置简化
<Route path={COMPLETE} component={Confirmation} />

注意事项 #

• React Router v5中，路由组件可通过props获取history对象，函数组件也可使用useHistory钩子直接调用。
• 若使用类组件，可在componentDidMount/componentDidUpdate生命周期中结合this.props.history实现跳转。
• 推荐使用Redux的useSelector钩子获取状态，替代直接调用store.getState()，避免状态更新不触发组件重渲染的问题。

内容的提问来源于stack exchange，提问作者David R