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

新闻中心 NEWS CENTER

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

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

2025-11-16

浏览次数：次

返回列表

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

在使用 React-Admin 开发时，如果在 Context 中存储全局信息，并在导航时更新 Context 数据，可能会遇到 "Warning: You cannot change ``" 警告。本文将深入探讨该问题的原因，并提供通过自定义路由 history 对象来解决此问题的方案，确保 React-Admin 应用的稳定性和性能。

问题分析

当你在 React 应用中使用 React Router 时，通常会使用 BrowserHistory 来处理路由。React Router 不希望 history 对象的引用发生改变，否则会触发警告。

在 React-Admin 中，如果没有显式地传递 history 对象给组件，React-Admin 会自动创建一个。当 Context 的值更新时，会导致组件重新渲染，进而创建一个新的 history 对象，从而触发 React Router 的警告。

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

解决此问题的关键在于，为 React-Admin 提供一个稳定的 history 对象，避免每次 Context 更新都重新创建。

安装 history 库：

如果你的项目中还没有安装 history 库，需要先安装它：
```
npm install history
# 或者
yarn add history
```

创建自定义 History 对象：

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

在应用的入口文件中，创建一个 BrowserHistory 实例，并将其传递给组件：

import { createBrowserHistory } from "history";
import { Admin, Resource } from 'react-admin';
import { Dashboard } from './Dashboard';
import { authProvider } from './authProvider';
import { dataProvider } from './dataProvider';
import { ShowFoo } from './ShowFoo';

const history = createBrowserHistory();

const App = () => {
    return (
        <Admin
            dashboard={Dashboard}
            authProvider={authProvider}
            dataProvider={dataProvider}
            history={history}
            title="My Admin App"
        >
            <Resource name="foo" show={ShowFoo} />
        </Admin>
    );
};

export default App;

在这个例子中，我们导入了 createBrowserHistory 函数，创建了一个 history 实例，并将其作为 history prop 传递给了组件。

示例代码

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

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

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

const MyMenuLink = ({ primaryText, to, leftIcon, sidebarIsOpen, onMenuClick, dense, foo }) => {
    const { setAppData, appData } = useContext(AppContext);

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

    return (
        <Link to={to} onClick={clickHandler}>
            <Typography variant="inherit">{primaryText}</Typography>
        </Link>
    );
};

const PostList = () => (
    <ListGuesser>
        <MyMenuLink to="/" foo="bar" />
    </ListGuesser>
);

const PostEdit = () => (
    <EditGuesser>
         <MyMenuLink to="/" foo="bar" />
    </EditGuesser>
);

const history = createBrowserHistory();

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

    const value = {
        appData,
        setAppData
    }

    return (
        <AppContext.Provider value={value}>
            <Admin title="My Admin App" history={history}>
                <Resource name="posts" list={PostList} edit={PostEdit} />
            </Admin>
        </AppContext.Provider>
    );
};

export default App;

在这个例子中：