反应 require("history").createBrowserHistory` 而不是 `require("history/createBrowserHistory")答案

【问题标题】：React require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")反应 require("history").createBrowserHistory` 而不是 `require("history/createBrowserHistory")
【发布时间】：2019-08-23 07:24:58
【问题描述】：

所以基本上我在 react 中使用历史库时遇到了问题。

是不是因为最新版本我应该尝试降级历史版本但是错误指出Support for the latter will be removed in the next major release.所以我应该如何更改以及我应该在哪里更改它？

上面写着：

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;

history.js

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

因为它显示错误，所以没有渲染任何内容。

【问题讨论】：

标签： reactjs react-redux react-router history.js

【解决方案1】：

只需为历史创建新文件并添加

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

从“为历史创建的文件路径将起作用”导入历史

【讨论】：

可以直接导入使用吗？在上面更新了我的答案，请看
是的，您可以直接将其导入 App 组件并将其附加到 ConnectedRouter
@kishanJiswal 你能看到上面的代码吗？我更新了我的 configStore.js，它仍然显示相同的错误
我会建议为历史和导入和使用保留单独的文件
@kishanJiswal 查看上面的编辑代码。这是你的意思吗？它没有工作

【解决方案2】：

使用大括号导入creatBrowserHistory。它导出为named export。

// history.js

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

然后在索引中导入并使用。

// 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 提到的问题，但在我的情况下很少发生，我在 hi 中错误地传递了组件div>} />（从 react-router-dom 导入）。删除它为我解决了这个问题。

【解决方案3】：

在我的代码中，运行单元测试时会发生此错误。通过不同地解释 ES6 代码，酶或玩笑是可能的。使包历史导出默认。

我现在的导入代码

import { createBrowserHistory } from 'history'

这是完整的history.js 代码

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

【讨论】：

【解决方案4】：

我已经更改了这个
import createHistory from 'history/createBrowserHistory'

到这个 import { createBrowserHistory } from 'history'

【讨论】：

【解决方案5】：

转到 node_modules > dva > lib > index.js

index.js

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

【讨论】：

【解决方案6】：

使用该建议，我能够在渲染时摆脱控制台中的错误。

// 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

【讨论】：

【解决方案7】：

这个导入对我有用var createHistory = require('history').createBrowserHistory; 而不是这个导入import createHistory from 'history/createBrowserHistory'; 历史文件如下：

var createHistory = require('history').createBrowserHistory;
export default createHistory();

【讨论】：

【解决方案8】：

更新 React-Router-Dom 库

如果您使用的是 yarn

写 => yarn add React-Router-Dom

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

Like this

【讨论】：

【解决方案9】：

试试这个：安装这个版本的react-router-dom@5.2.0。如果有错误，安装webpack@3.1.0。

【讨论】：

【解决方案10】：

试试这个

转到node_modules/history/createBrowserHistory 并按照警告说明进行操作
delete this ('createBrowserHistory') 将其替换为新行：require("history").createBrowserHistory

然后

转到node_modules/history/createHashHistory
delete ('createHashHistory') 将其替换为新行：require("history").createHashHistory

【讨论】：