React使用`require("history").createBrowserHistory`代替`require("history/createBrowserHistory")`。

Question

基本上，我在使用React中的history库时遇到了问题。

这是否是因为最新版本的问题？我应该尝试降级history版本吗？但是错误信息显示“支持后者将在下一个主要版本中被删除”，那么我该如何更改，以及在哪里更改呢？

错误信息如下：

Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`. Support for the latter will be removed in the next major release.

并且

Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.

我不太确定如何修复它。

import createHistory from './history'

import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/es/storage'
import thunk from 'redux-thunk'
import createRootReducer from './reducers'

export const history = createHistory();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistConfig = {
  key: 'root',
  storage
};

const reducers = persistReducer( persistConfig, createRootReducer(history));
const exampleMiddleware =  store => next => action => {
  // if (action.type === 'message'){
  //   do something
  // } else {
  //   next(action);
  // }
}

export default () => {
  const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(routerMiddleware(history), thunk, exampleMiddleware))
  );
  let persistor = persistStore(store)

  return  { store, persistor }
}

import React, { Component } from 'react';
import { Provider, ReactReduxContext } from 'react-redux';
// import { createStore } from 'redux';
import { ConnectedRouter } from 'connected-react-router'
import { PersistGate } from 'redux-persist/integration/react'

import configureStore, { history } from './configureStore'
import Routers from './Routers';

const { persistor, store } = configureStore();

class App extends Component {
  render() {
    return (

      <Provider store={store} context={ReactReduxContext}>
        <div> SYNTIFY </div>
        <PersistGate loading={null} persistor={persistor}>

          <ConnectedRouter history={history} context={ReactReduxContext}>
            <Routers />
          </ConnectedRouter>

        </PersistGate>
      </Provider>

    );
  }
}

export default App;

历史记录.js

import createHistory from 'history/createBrowserHistory';
export default createHistory;

由于显示错误，没有任何内容被渲染出来。

- Nick Bb

Answer 1

使用花括号导入creatBrowserHistory。它作为命名导出导出。

// history.js

import { createBrowserHistory } from "history";
export default createBrowserHistory(); 

然后在index中导入并使用它。

// index.js
import history from "./history";
import { Provider } from "react-redux";
import store from "./store/store";

const AppContainer = () => (
    <Router history={history}>
        <Provider store={store}>
             <Route path="/" component={App} />
        </Provider>
    </Router>
);

- Giwan

---

只是一个提示，大多数情况下都像@Giwan提到的那样，但在我的情况下很少发生，我在<Route component={<div>hi</div>} />（从react-router-dom导入）中错误地传递了组件。删除它解决了我的问题。 - Tanishq Vyas

为什么你在Redux store的Provider之前定义了Router？ - vsync

@vsync 没有特别的原因。我认为在这种情况下顺序并不重要。 - Giwan

Answer 2

我修改了这个
import createHistory from 'history/createBrowserHistory'

变成了这样 import { createBrowserHistory } from 'history'

- CrsCaballero

Answer 3

在我的代码中，运行单元测试时出现了这个错误。enzyme或jest可能会以不同的方式解释ES6代码。请检查一下包历史中是否有export default。

现在我的导入代码如下：

import { createBrowserHistory } from 'history'

这是完整的history.js代码。

import { createBrowserHistory } from 'history';
export default createBrowserHistory(); 

- Sunny Sultan

Answer 4

仅仅得到上述的解决方案并不足够：

import { createBrowserHistory } from "history";
export default createBrowserHistory(); 

我解决了这个问题，更新了react-router和react-router-dom到以下版本：

"react-router": "^5.3.3",
"react-router-dom": "^5.3.3"

- Ivan Sanchez

---

我的情况也一样，仅使用上述修复措施是不够的。我的（适用于node 16的）需要："react-router": "4.3.1", "react-router-dom": "4.3.1", - The Coder

Answer 5

前往 node_modules > dva > lib > index.js

index.js

来源：https://www.cnblogs.com/fairylee/p/11198868.html

- anson

Answer 6

尝试这样做：安装此版本的react-router-dom@5.2.0。如果出现错误，请安装webpack@3.1.0。

- d3zzi5

Answer 7

使用这个建议，我能够在渲染时消除控制台中的错误。

// NO IMPORT ABOVE  (just set the import directly to a variable)
    const history = require("history").createBrowserHistory()


// then you can 
if( *some-requirement*){
history.push("/desiredRoute")
}. 
// right from your App.js

- Nate Mosco

Answer 8

你需要进行API迁移。

// createBrowserHistory  was createHistory in createBrowserHistory
import { createBrowserHistory as history} from 'history'

import { Provider } from "react-redux";
import store from "./store/store";

const AppContainer = () => (
    <Router history={history}>
        <Provider store={store}>
             <Route path="/" component={App} />
        </Provider>
    </Router>
);

感谢@CrsCaballero的贡献

- dengST30

Answer 9

更新 React-Router-Dom 库

如果您正在使用 yarn

请写入 => yarn add React-Router-Dom

它将自动更新到当前版本的路由库

像这样

- Milan Vasoya

Answer 10

试试这个

• 前往 node_modules/history/createBrowserHistory，并按照警告进行操作

• 删除此行 ('createBrowserHistory')，在新行中用以下代码替换： require("history").createBrowserHistory

然后

• 前往 node_modules/history/createHashHistory

• 删除此行 ('createHashHistory')，在新行中用以下代码替换： require("history").createHashHistory

- Mohamed Saeed