React-Router路由变更警告消除及根组件Props向子路由传递方案

这个警告的核心原因是：你的AppRoutes组件每次渲染时都会创建全新的<Route>元素树，React Router检测到routes属性发生变化，因此抛出警告。要解决这个问题，我们需要保持路由结构的静态性，同时找到替代方式传递根组件的Props，而不是直接在<Route>上展开this.props。

下面提供三个可行的方案，你可以根据项目情况选择：

方案一：使用Route的render属性传递Props #

这是最直接的方式，我们将路由配置定义为静态常量，然后通过render函数在渲染组件时注入根Props和路由自身的Props（如match、location）。

// 定义静态路由配置
const routeConfig = [
  { path: '/', component: App, exact: true },
  { path: '/transaction', component: Transaction },
  { path: '/users-management', component: UsersManagement },
  { path: '/issues', component: Issues },
  { path: '/not-found', component: NotFound },
  { path: '/settlement-management', component: SettlementManagement },
  { path: '/categories-management', component: CategoriesManagement },
  { path: '/gifts-management', component: GiftsManagement },
  { path: '/*', redirectTo: '/not-found' }
];

export default class AppRoutes extends Component {
  render() {
    const rootProps = this.props;
    return (
      <Router history={hashHistory}>
        {routeConfig.map((route, index) => {
          if (route.redirectTo) {
            return <Redirect key={index} from={route.path} to={route.redirectTo} />;
          }
          return (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              render={(routerProps) => (
                // 同时传递路由Props和根组件Props
                <route.component {...routerProps} {...rootProps} />
              )}
            />
          );
        })}
      </Router>
    );
  }
}

这种方式既保持了路由结构的静态性（避免警告），又能确保每个路由组件都能拿到根Props，而且可以同时获取React Router提供的路由相关Props。

方案二：使用React Context统一传递根Props #

如果你的项目使用React 16.3+，这是最优雅的方案。我们通过Context将根Props全局共享，任何嵌套层级的组件都可以直接获取，无需在每个Route上手动传递。

步骤1：创建Context #

// src/contexts/RootPropsContext.js
import { createContext } from 'react';

// 初始化Context（可以设置默认值）
const RootPropsContext = createContext({});

export const RootPropsProvider = RootPropsContext.Provider;
export const RootPropsConsumer = RootPropsContext.Consumer;
export default RootPropsContext;

步骤2：在根组件中注入Props #

// 根组件渲染代码
import { RootPropsProvider } from './contexts/RootPropsContext';

render(){
  return(
    <RootPropsProvider value={this.props}>
      <AppRoutes />
    </RootPropsProvider>
  );
}

步骤3：使用静态路由 #

// AppRoutes组件
const staticRoutes = (
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="/transaction" component={Transaction}/>
      <Route path="/users-management" component={UsersManagement}/>
      <Route path="/issues" component={Issues}/>
      <Route path='/not-found' component={NotFound}/>
      <Route path='/settlement-management' component={SettlementManagement}/>
      <Route path='/categories-management' component={CategoriesManagement}/>
      <Route path='/gifts-management' component={GiftsManagement}/>
      <Redirect from='/*' to='/not-found'/>
    </Route>
  </Router>
);

export default class AppRoutes extends Component {
  render() {
    return staticRoutes;
  }
}

步骤4：在子组件中获取根Props #

类组件：

import RootPropsContext from './contexts/RootPropsContext';

class Transaction extends Component {
  // 绑定Context
  static contextType = RootPropsContext;

  render() {
    // 直接通过this.context获取根Props
    const { someProp } = this.context;
    return <div>{someProp}</div>;
  }
}

函数组件：

import { useContext } from 'react';
import RootPropsContext from './contexts/RootPropsContext';

const Transaction = () => {
  const rootProps = useContext(RootPropsContext);
  return <div>{rootProps.someProp}</div>;
};

这种方案特别适合嵌套较深的组件，无需逐层传递Props，维护成本更低。

方案三：使用高阶组件（HOC）包裹路由组件 #

如果你习惯使用HOC模式，可以创建一个包裹组件，将根Props注入到路由组件中：

// 定义HOC
const withRootProps = (rootProps) => (Component) => {
  return (routerProps) => <Component {...routerProps} {...rootProps} />;
};

export default class AppRoutes extends Component {
  // 静态路由配置
  static routes = [
    { path: '/', component: App, exact: true },
    { path: '/transaction', component: Transaction },
    // ...其他路由配置
    { path: '/*', redirectTo: '/not-found' }
  ];

  render() {
    const wrapComponent = withRootProps(this.props);
    return (
      <Router history={hashHistory}>
        {AppRoutes.routes.map((route, index) => {
          if (route.redirectTo) {
            return <Redirect key={index} from={route.path} to={route.redirectTo} />;
          }
          return (
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              component={wrapComponent(route.component)}
            />
          );
        })}
      </Router>
    );
  }
}

这个方案通过HOC封装了Props传递逻辑，路由结构依然保持静态，同样能避免警告。

总结 #

• 如果组件数量少、层级浅，方案一最直接；
• 如果组件多、嵌套深，方案二（Context）是最优选择；
• 如果你熟悉HOC模式，方案三也能很好地解决问题。

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