反应管理员 | 未捕获的错误：缺少历史道具

Question

I am trying to implement react-admin in my project however upon render I get this message

Uncaught Error: Missing history prop. When integrating react-admin inside an existing redux Provider, you must provide the same 'history' prop to the <Admin> as the one used to bootstrap your routerMiddleware. React-admin uses this history for its own ConnectedRouter.

There is very little to be found about this issue and I'm not entirely sure how to go about setting the history. I've tried importing createHistory from 'history/createHashHistory' but then I get this error

Uncaught Could not find router reducer in state tree, it must be mounted under "router"

Is there a way to get this rendering properly? And if so, what would be the proper way to go about configuring the Admin Component's history?

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { createStore, compose, applyMiddleware} from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { BrowserRouter as Router } from 'react-router-dom';
import { reducer } from './redux/reducer';
import * as serviceWorker from './serviceWorker';

const store = createStore(reducer, compose(
  applyMiddleware(thunk),
  window.navigator.userAgent.includes('Chrome') ?
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : compose,
  ),
);

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Provider store={store}>
        <App />
      </Provider>
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

AdminPage.js

import { Admin, Resource } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider('http://localhost:3000');

const AdminPage = () => {

  return (
    <Admin dataProvider={dataProvider}>
      <Resource name="services" />
    </Admin>
  )
}

export default AdminPage;

App.js

import React from 'react';
import './App.css';
import AdminPage from './components/AdminPage';
import { Switch, Route } from 'react-router-dom';

const App = () => {

  return (
    <div className="app">
      <Switch>
        <Route exact path='/manage' component={ AdminPage } />
      </Switch>
    </div>
  );
}

export default App;

Answer 1

The proper way to write a reducer in this case is documented at https://marmelab.com/react-admin/CustomApp.html#using-an-existing-redux-provider .

But from what I see, you don't need one. You just added the thunk middleware, which is useless in react-admin as it already handles sagas.