React-Admin 上下文更新导致路由历史警告的解决办法

当在 React-Admin 应用中使用 Context 来管理全局状态，并在更新 Context 数据时遇到 "Warning: You cannot change ``" 警告，通常是因为每次 Context 值更新都会导致 `` 组件重新渲染，进而创建新的路由历史对象。本文将介绍如何通过手动传递路由历史对象来解决此问题，避免不必要的警告。

React Router 依赖于历史对象来管理应用的路由。React-Admin 内部也使用了 React Router。默认情况下，如果开发者没有显式地传递历史对象给 <Admin> 组件，React-Admin 会自动创建一个。当 Context 发生变化，导致 <Admin> 组件重新渲染时，就会创建一个新的历史对象，从而触发 React Router 的警告。

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

要解决这个问题，我们需要手动创建一个历史对象，并将其传递给 <Admin> 组件。这样，即使 Context 发生变化，<Admin> 组件重新渲染，使用的仍然是同一个历史对象，从而避免警告。

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

   npm install history

2. 创建历史对象并传递给 <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
   import ShowFoo from './ShowFoo'; // 假设你有一个 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 属性传递给 <Admin> 组件。

   

   Rose.ai

   一个云数据平台，帮助用户发现、可视化数据

   下载

代码解释：

• createBrowserHistory(): 创建一个基于浏览器历史记录的 history 对象。
• history={history}: 将创建的 history 对象传递给 React-Admin 的 <Admin> 组件。

示例：结合 Context 使用

以下是一个结合 Context 使用的完整示例，展示了如何避免路由历史警告。

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

// 假设你有一个 Dashboard 组件
import authProvider from './authProvider'; // 假设你有一个 authProvider
import dataProvider from './dataProvider'; // 假设你有一个 dataProvider
import ShowFoo from './ShowFoo'; // 假设你有一个 ShowFoo 组件

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

const history = createBrowserHistory();

export const MyMenuLink = ({ primaryText, to, leftIcon, sidebarIsOpen, onMenuClick, dense, foo }) => {
    const { appData, setAppData } = 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 App = () => {
  const [appData, setAppData] = useState({
    foo: null,
  });

  const appContextValue = {
      appData,
      setAppData
  }

  return (
    <AppContext.Provider value={appContextValue}>
        <Admin
          dataProvider={dataProvider}
          authProvider={authProvider}
          history={history}
          title="My Admin App"
        >
          <Resource name="foo" show={ShowFoo} />
        </Admin>
    </AppContext.Provider>
  );
};

export default App;

注意事项：

• 确保在整个应用生命周期内，只创建一个历史对象，并将其传递给 <Admin> 组件。
• 如果使用了其他的路由库，例如 BrowserRouter，确保与 React-Admin 的路由机制兼容。

总结：

通过手动创建并传递历史对象给 React-Admin 的 <Admin> 组件，可以有效地避免因 Context 更新导致的路由历史警告。 这种方法确保了即使在组件重新渲染的情况下，React Router 仍然使用相同的历史对象，从而保证了路由的正确性和稳定性。 记住，始终保持对 React Router 和 React-Admin 路由机制的理解，以便更好地解决潜在的问题。