Реагируйте require("history").createBrowserHistory` вместо `require("history/createBrowserHistory")

Так что в основном у меня проблема с использованием библиотеки истории в реакции.

Это из-за последней версии я должен попытаться понизить версию истории, но поскольку ошибка гласит, что 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;

история.js

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

Поскольку он показывает ошибку, ничего не отображается.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
35
0
48 952
10
Перейти к ответу Данный вопрос помечен как решенный

Ответы 10

просто создайте новый файл для истории и добавьте

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

импортировать историю из «пути к файлу, созданного для истории, он будет работать»

Могу ли я просто напрямую импортировать его и использовать? обновил мой ответ выше, пожалуйста, посмотрите

Nick Bb 02.04.2019 07:14

да, вы можете напрямую импортировать его в компонент приложения и прикрепить к ConnectedRouter

Kishan Jaiswal 02.04.2019 07:20

@kishanJiswal Вы видите код выше? я обновил свой configStore.js, и он все еще показывает ту же ошибку

Nick Bb 02.04.2019 07:22

я предлагаю сохранить отдельный файл для истории и импортировать и использовать

Kishan Jaiswal 02.04.2019 07:26

@kishanJiswal посмотрите код редактирования выше. это то, что вы имели в виду? это не сработало

Nick Bb 02.04.2019 07:35

Давайте продолжить обсуждение в чате.

Nick Bb 02.04.2019 07:42

Вы нашли решение этой проблемы? Я сталкиваюсь с аналогичной проблемой

prgrmr 10.04.2019 19:56
Ответ принят как подходящий

Импортируйте 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, но редко, как это случалось в моем случае, я неправильно передал компонент в <Route component = {<div>hi</div>} /> (импортированный из реакция-маршрутизатор-дом). Удаление этого решило проблему для меня.

Tanishq Vyas 16.06.2021 11:27

Почему вы определили Router до магазина редуктов Provider?

vsync 23.01.2022 23:08

@vsync без особых причин. Я не думаю, что порядок имеет значение в этом случае.

Giwan 25.01.2022 19:57

В моем коде эта ошибка возникает при запуске модульного теста. Фермент или шутка возможны, если интерпретировать код ES6 по-разному. Сделать в истории пакетов экспорт по умолчанию.

Мой код импорта сейчас

import { createBrowserHistory } from 'history'

Вот полный код history.js

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

Я изменил это
import createHistory from 'history/createBrowserHistory'

к этому import { createBrowserHistory } from 'history'

перейти к node_modules > dva > lib > index.js

index.js

источник: https://www.cnblogs.com/fairylee/p/11198868.html

С помощью предложения мне удалось избавиться от ошибки в консоли при рендере.

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

Этот импорт работал для меня var createHistory = require('history').createBrowserHistory; вместо этого импорта import createHistory from 'history/createBrowserHistory'; Файл истории приведен ниже:

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

Обновите библиотеку React-Router-Dom

Если вы используете пряжа

пиши => yarn add React-Router-Dom

он автоматически обновится до текущей версии библиотеки Router

Так

Попробуйте следующее: установите эту версию [email protected]. Если есть ошибка, установите [email protected].

попробуй это

  • перейдите к node_modules/history/createBrowserHistory и сделайте, как сказано в предупреждении

  • удалите это ('createBrowserHistory') замените его этим в новой строке: require("history").createBrowserHistory

тогда

  • перейти к node_modules/history/createHashHistory

  • удалить ('createHashHistory') заменить его на это в новой строке: require("history").createHashHistory

Другие вопросы по теме