React Admin 中更新 Context 值导致路由历史警告的解决方案-js教程-PHP中文网

React Admin 中更新 Context 值导致路由历史警告的解决方案

DDD

发布： 2025-11-16 13:55:08

原创

899人浏览过

react admin 中更新 context 值导致路由历史警告的解决方案

在 React Admin 应用中使用 Context 管理全局状态时，更新 Context 值可能会触发 "Warning: You cannot change ``" 警告。这是因为每次 Context 值更新，都会导致 `` 组件重新渲染，进而重新创建路由 history 对象。本文将介绍如何通过传入自定义 history 对象来解决这个问题，避免不必要的警告。

理解问题根源

react-router 库负责处理应用中的路由。它使用 history 对象来管理浏览器的导航历史。react-admin 依赖于 react-router，并且在 <Admin> 组件中使用了路由。

当 <Admin> 组件首次渲染时，如果未显式传递 history prop，react-admin 会自动创建一个默认的 history 对象。问题在于，当父组件（例如，提供 Context 的组件）的状态发生变化并导致 <Admin> 组件重新渲染时，react-admin 可能会创建一个新的 history 对象。react-router 不允许在运行时更改 history 对象，因此会发出警告。

解决方案：传递自定义 History 对象

解决此问题的关键在于确保 <Admin> 组件在整个应用生命周期中使用同一个 history 对象。这可以通过手动创建一个 history 对象，并将其作为 prop 传递给 <Admin> 组件来实现。

步骤 1: 安装 history 库

首先，确保你已经安装了 history 库。如果没有，可以使用以下命令安装：

npm install history
# 或者
yarn add history

登录后复制

步骤 2: 创建 History 对象

在应用的入口文件中（例如，App.js 或 index.js），创建一个 BrowserHistory 对象：

UP简历

基于AI技术的免费在线简历制作工具

128

查看详情

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

登录后复制

步骤 3: 将 History 对象传递给 <Admin> 组件

将创建的 history 对象作为 history prop 传递给 <Admin> 组件：

import { Admin, Resource } from 'react-admin';
import { createBrowserHistory } from 'history';
import Dashboard from './Dashboard'; // 假设你有一个 Dashboard 组件
import authProvider from './authProvider'; // 假设你有一个 authProvider
import dataProvider from './dataProvider'; // 假设你有一个 dataProvider

const history = createBrowserHistory();

const App = () => {
  return (
    <Admin
      dashboard={Dashboard}
      authProvider={authProvider}
      dataProvider={dataProvider}
      history={history}
    >
      <Resource name="posts" />
    </Admin>
  );
};

export default App;

登录后复制

通过以上步骤，每次 <Admin> 组件重新渲染时，都会使用同一个 history 对象，从而避免了 "Warning: You cannot change <Router history>" 警告。

示例代码

以下是一个完整的示例，展示了如何使用 Context 和自定义 history 对象：

import React, { createContext, useState, useContext } from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import { createBrowserHistory } from 'history';
import jsonServerProvider from 'ra-json-server';

const AppContext = createContext({
    appData: {},
    setAppData: () => {},
});

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const history = createBrowserHistory();

const App = () => {
  const [appData, setAppData] = useState({
    foo: null,
  });

  return (
    <AppContext.Provider value={{appData, setAppData}}>
      <Admin dataProvider={dataProvider} history={history}>
        <Resource name="users" list={ListGuesser} />
      </Admin>
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

export default App;

登录后复制

在这个例子中，我们创建了一个 AppContext 用于管理全局状态，并在 <Admin> 组件中使用了自定义的 history 对象。当 appData 更新时，<Admin> 组件会重新渲染，但由于我们传递了相同的 history 对象，所以不会出现警告。