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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-11-16

浏览次数：次

返回列表

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

本文旨在解决在使用 React-Admin 时，通过 Context 更新全局状态导致路由历史警告的问题。文章将分析警告产生的原因，并提供通过手动创建和传递 history 对象来避免此问题的具体方法，并提供示例代码和在线沙箱进行演示。

在使用 React-Admin 开发应用时，有时需要使用 Context 来管理全局状态。当我们在组件中使用 setAppData 等函数更新 Context 中的数据时，可能会在控制台中看到 "Warning: You cannot change " 的警告。这个警告通常与 React Router 的历史对象有关，并且在 React-Admin 中，这个问题通常是因为每次 Context 更新都会导致组件重新渲染，进而重新创建 history 对象。

问题分析

React Router 依赖于 history 对象来管理应用的路由状态。通常情况下，我们会使用 BrowserHistory，让浏览器处理路由的变化。React-Admin 内部也使用了 React Router。如果我们在组件中没有显式地传入 history 对象，React-Admin 会自动创建一个。

当 Context 的值发生变化，React 会重新渲染依赖该 Context 的组件，包括组件。如果没有手动传入 history，每次重新渲染都会创建一个新的 history 对象，并传递给 React Router，这会导致 React Router 抛出警告，因为 history 对象不应该被动态改变。

解决方案：手动创建并传递 History 对象

解决这个问题的方法是手动创建一个 history 对象，并将其传递给组件。这样，即使组件重新渲染，history 对象仍然是同一个，从而避免了警告。

具体步骤：

安装 history 库 (如果尚未安装):

npm install history
# 或者
yarn add history

创建 history 对象:
Visla
AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。
100 查看详情
在你的应用入口文件 (例如 App.js 或 index.js) 中，导入 createBrowserHistory 并创建一个 history 对象。
```
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
```

将 history 对象传递给组件:

将创建的 history 对象作为 history prop 传递给组件。

import { Admin, Resource } from 'react-admin';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const App = () => (
    <Admin dashboard={Dashboard} authProvider={authProvider} dataProvider={dataProvider} history={history}>
        <Resource name="posts" list={PostList} edit={PostEdit} create={PostCreate} />
    </Admin>
);

export default App;

示例代码：

下面是一个完整的示例，展示了如何创建和传递 history 对象：

import React, { useState, createContext } from 'react';
import { Admin, Resource } from 'react-admin';
import { createBrowserHistory } from 'history';
import { Link, Typography } from '@mui/material';

// 模拟 dataProvider 和 authProvider
const dataProvider = {
    getList: () => Promise.resolve({ data: [], total: 0 }),
    getOne: () => Promise.resolve({ data: {} }),
    getMany: () => Promise.resolve({ data: [] }),
    getManyReference: () => Promise.resolve({ data: [], total: 0 }),
    create: () => Promise.resolve({ data: {} }),
    update: () => Promise.resolve({ data: {} }),
    updateMany: () => Promise.resolve({ data: [] }),
    delete: () => Promise.resolve({ data: {} }),
    deleteMany: () => Promise.resolve({ data: [] }),
};

const authProvider = {
    login: () => Promise.resolve(),
    logout: () => Promise.resolve(),
    checkAuth: () => Promise.resolve(),
    checkError: () => Promise.resolve(),
    getPermissions: () => Promise.resolve(),
};

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

const history = createBrowserHistory();

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

    const clickHandler = (foo) => {
        const newAppData = {
            ...appData,
            foo: foo,
        };
        setAppData(newAppData);
    };

    return (
        <AppContext.Provider value={{ appData, setAppData }}>
            <Admin title="My Admin App" dashboard={() => <Dashboard clickHandler={clickHandler} />} authProvider={authProvider} dataProvider={dataProvider} history={history}>
                <Resource name="foo" />
            </Admin>
        </AppContext.Provider>
    );
};

const Dashboard = ({clickHandler}) => (
    <Link to="#" onClick={() => clickHandler("bar")}>
        Click me
    </Link>
);

export default App;

注意事项：

确保在应用的根组件中创建 history 对象，并将其传递给组件。
不要在组件内部动态创建 history 对象，否则仍然会触发警告。

总结

通过手动创建和传递 history 对象，可以有效地解决 React-Admin 中 Context 更新导致路由历史警告的问题。这种方法确保了组件始终使用同一个 history 对象，避免了 React Router 抛出警告。在开发 React-Admin 应用时，如果使用了 Context 管理全局状态，并且遇到了路由历史警告，请务必尝试这种解决方案。

以上就是React-Admin Context 更新导致路由历史警告的解决方案的详细内容，更多请关注其它相关文章！

# 是一个 # 信息关键词排名趋势 # 保险行业营销推广创新 # 湖北网站网络推广行业 # 上海网站建设公司代理 # 网站优化风格分析报告 # 涿州抖音SEO排名 # 石首装饰网站建设 # 朝阳网站建设案例套餐 # 榆阳区自媒体推广营销 # 出轨网站建设美丽 # 会在 # 是因为 # 您的 # react # 有什么区别 # 抛出 # 如何使用 # 绑定 # 表单 # 创建一个 # 路由 # app # 浏览器 # npm # go # js

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：rofi菜单一键生成HTML+CSS完整项目结构！

下一篇：如何通过Sublime Text配置HTML自动完成的详细步骤

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

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

问题分析

解决方案：手动创建并传递 History 对象

总结