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

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

问题分析

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

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

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

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

1. 安装 history 库：

   如果你的项目中还没有安装 history 库，需要先安装它：

   npm install history
   # 或者
   yarn add history

   登录后复制

2. 创建自定义 History 对象：

   

   UP简历

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

   128

   查看详情

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

   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 传递给了 <Admin /> 组件。

示例代码

下面是一个完整的示例，展示了如何使用 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;

在这个例子中：

• 我们创建了一个 AppContext 用于存储全局数据。
• MyMenuLink 组件使用 useContext 获取 setAppData 函数，并在点击链接时更新 Context 数据。
• 创建了一个 history 对象并传递给了 <Admin /> 组件。

注意事项

• 确保 history 对象在应用启动时只创建一次，并在整个应用生命周期内保持不变。
• 避免在组件内部创建 history 对象，否则每次组件渲染都会创建一个新的 history 对象，导致问题复现。
• 如果使用了其他的路由库，需要根据相应的文档创建和传递 history 对象。

总结

通过为 React-Admin 提供自定义的 history 对象，可以有效地解决 "Warning: You cannot change <Router history>" 警告，保证应用的稳定运行。理解 React Router 的工作原理以及 React-Admin 的内部实现，能够帮助你更好地解决类似的问题。

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