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 对象:

在你的应用入口文件 (例如 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 = () => (
    
        
    
);

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 (
        
             } authProvider={authProvider} dataProvider={dataProvider} history={history}>
                
            
        
    );
};

const Dashboard = ({clickHandler}) => (
     clickHandler("bar")}>
        Click me
    
);

export default App;

注意事项：

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

总结

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