React Admin 中更新 Context 值导致路由历史警告的解决方案_技术教程

在 React Admin 应用中使用 Context 管理全局状态时，更新 Context 值可能会触发 "Warning: You cannot change ``" 警告。这是因为每次 Context 值更新，都会导致 `` 组件重新渲染，进而重新创建路由 history 对象。本文将介绍如何通过传入自定义 history 对象来解决这个问题，避免不必要的警告。

理解问题根源

react-router 库负责处理应用中的路由。它使用 history 对象来管理浏览器的导航历史。react-admin 依赖于 react-router，并且在组件中使用了路由。

当组件首次渲染时，如果未显式传递 history prop，react-admin 会自动创建一个默认的 history 对象。问题在于，当父组件（例如，提供 Context 的组件）的状态发生变化并导致组件重新渲染时，react-admin 可能会创建一个新的 history 对象。react-router 不允许在运行时更改 history 对象，因此会发出警告。

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

解决此问题的关键在于确保组件在整个应用生命周期中使用同一个 history 对象。这可以通过手动创建一个 history 对象，并将其作为 prop 传递给组件来实现。

步骤 1: 安装 history 库

首先，确保你已经安装了 history 库。如果没有，可以使用以下命令安装：

npm install history
# 或者
yarn add history

步骤 2: 创建 History 对象

在应用的入口文件中（例如，App.js 或 index.js），创建一个 BrowserHistory 对象：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

步骤 3: 将 History 对象传递给组件

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

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

const history = createBrowserHistory();

const App = () => {
  return (
    
      
    
  );
};

export default App;

通过以上步骤，每次组件重新渲染时，都会使用同一个 history 对象，从而避免了 "Warning: You cannot change " 警告。

示例代码

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

import React, { createContext, useState, useContext } from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import { createBrowserHistory } from 'history';
import jsonServerProvider from 'ra-json-server';

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

const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');

const history = createBrowserHistory();

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

  return (
    
      
        
      
    
  );
};

export const useAppContext = () => useContext(AppContext);

export default App;

在这个例子中，我们创建了一个 AppContext 用于管理全局状态，并在组件中使用了自定义的 history 对象。当 appData 更新时，组件会重新渲染，但由于我们传递了相同的 history 对象，所以不会出现警告。