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





просто создайте новый файл для истории и добавьте
import createHistory from 'history/createBrowserHistory';
export default createHistory();
импортировать историю из «пути к файлу, созданного для истории, он будет работать»
да, вы можете напрямую импортировать его в компонент приложения и прикрепить к ConnectedRouter
@kishanJiswal Вы видите код выше? я обновил свой configStore.js, и он все еще показывает ту же ошибку
я предлагаю сохранить отдельный файл для истории и импортировать и использовать
@kishanJiswal посмотрите код редактирования выше. это то, что вы имели в виду? это не сработало
Давайте продолжить обсуждение в чате.
Вы нашли решение этой проблемы? Я сталкиваюсь с аналогичной проблемой
Импортируйте 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>} /> (импортированный из реакция-маршрутизатор-дом). Удаление этого решило проблему для меня.
Почему вы определили Router до магазина редуктов Provider?
@vsync без особых причин. Я не думаю, что порядок имеет значение в этом случае.
В моем коде эта ошибка возникает при запуске модульного теста. Фермент или шутка возможны, если интерпретировать код ES6 по-разному. Сделать в истории пакетов экспорт по умолчанию.
Мой код импорта сейчас
import { createBrowserHistory } from 'history'
Вот полный код history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
Я изменил это import createHistory from 'history/createBrowserHistory'
к этому
import { createBrowserHistory } from 'history'
С помощью предложения мне удалось избавиться от ошибки в консоли при рендере.
// 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
Могу ли я просто напрямую импортировать его и использовать? обновил мой ответ выше, пожалуйста, посмотрите