web-dev-qa-db-fra.com

React require ("history"). CreateBrowserHistory` au lieu de `require (" history / createBrowserHistory ")

Donc, fondamentalement, j'ai un problème lors de l'utilisation de la bibliothèque historique de React.

Est-ce à cause de la dernière version dois-je essayer de rétrograder la version d'historique mais comme l'erreur indique que Support for the latter will be removed in the next major release. alors comment dois-je changer et où dois-je le changer?

ça dit:

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

ET

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

Je ne sais pas trop comment y remédier.

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;

Comme il montre une erreur, rien n'est rendu.

reactjsreact-reduxreact-routerhistory.js
18
Nick Bb

Importez creatBrowserHistory avec des accolades. Il est exporté sous la forme nommé export .

// history.js

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

Ensuite, importez-le et utilisez-le dans l'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>
);
23
Giwan

J'ai changé ça
import createHistory from 'history/createBrowserHistory'

pour ça import { createBrowserHistory } from 'history'

6
CrsCaballero

Dans mon code, cette erreur se produit lors de l'exécution d'un test unitaire. Une enzyme ou une plaisanterie est possible en interprétant le code ES6 différemment. Rendre par défaut l'historique d'exportation du package.

Mon code d'importation maintenant

import { createBrowserHistory } from 'history'

Voici le code complet 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

source: https://www.cnblogs.com/fairylee/p/11198868.html

0
anson

il suffit de créer un nouveau fichier pour l'historique et d'ajouter

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

importer l'historique à partir du 'chemin de fichier créé pour l'historique, cela fonctionnera'

0
Kishan Jaiswal