web-dev-qa-db-ja.com

React require（ "history"）。createBrowserHistory`の代わりに `require（" history / createBrowserHistory "）

だから基本的に、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;

エラーが表示されるため、何もレンダリングされません。

reactjsreact-reduxreact-routerhistory.js
18
Nick Bb

中括弧で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>
);
23
Giwan

私はこれを変更しました
import createHistory from 'history/createBrowserHistory'

これにimport { createBrowserHistory } from 'history'

6
CrsCaballero

私のコードでは、単体テストを実行するとこのエラーが発生します。 ES6コードを別の方法で解釈することにより、酵素または冗談が可能になります。パッケージ履歴のエクスポートをデフォルトにします。

私のインポートコード

import { createBrowserHistory } from 'history'

ここに完全なhistory.jsコード

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

goto node_modules> dva> lib> index.js enter image description here

index.js enter image description here

ソースから： https://www.cnblogs.com/fairylee/p/11198868.html

0
anson

履歴用の新しいファイルを作成して追加するだけです

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

「機能する履歴用に作成されたファイルパス」から履歴をインポートする

0
Kishan Jaiswal