Ошибка типа: не удается прочитать свойство 'location' из undefined - connected-реакции-router - ReactRouter v5 - PullRequest
0 голосов
/ 26 апреля 2020

error Здравствуйте, я создал приложение с использованием React и Redux, я искал, как обрабатывать перенаправление после действия избыточности, и нашел пакет подключенного реагирующего маршрутизатора от ReactRouter, я следовал за всеми официальная документация, но я получаю следующую ошибку: TypeError: Невозможно прочитать свойство 'location' из undefined, я видел много тем об этой проблеме и пытался понизить версию Redx до 6.0.1, а также пытался переместить свою историю в отдельную file

history. js

import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();

routerReducer. js

import { connectRouter } from 'connected-react-router';

const createRootReducer = (history) => {
   router: connectRouter(history)
}
export default createRootReducer;

store. js

import { applyMiddleware, combineReducers, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import _ from 'lodash';
import thunk from 'redux-thunk';
import {history} from "./history";
import { connectRouter,routerMiddleware } from 'connected-react-router'
import routerReducer from './routerReducer';
import browse from "../components/browse/duck/reducer";
import collection from "../components/collections/collection/duck/reducer";
import myCollections from "../components/collections/my-collections/duck/reducer";
import startupDetails from "../components/startups/startup-details/duck/reducer";
import session from "./session/reducer";
import activities from "../components/activities/duck/reducer";
import compare from "../components/compare/duck/reducer";
import profiles from "../components/profiles/duck/reducer";
import StartupReducer from "../components/startups/startup-details/detail- 
card/tabs/duck/reducers/StartupReducer";
import ActivityReducer from "../components/activities/activity-details/details- 
card/tabs/duck/reducers/ActivityReducer";


const selectedReducers = ['browse', 'collection', 'myCollections', 'startupDetails', 
'session', 'activities', 'compare', 'StartupReducer' , 'ActivityReducer','routerReducer'];

const stateSanitizer = state => _.pick(state, selectedReducers);  


const middleware = [
    thunk,
    routerMiddleware(history)
];

const composeEnhancers = composeWithDevTools({stateSanitizer});

const enhancer = composeEnhancers(applyMiddleware(...middleware ));

const reducers = combineReducers({
    routerReducer,
    browse,
    collection,
    myCollections,
    startupDetails,
    session,
    activities,
    compare,
    profiles,
    StartupReducer,
    ActivityReducer
});

const store = createStore(reducers, enhancer);

export default store

app . js

const App = () => {
return <IntlProvider locale={locale} messages={messages[locale]}>
    <Provider store={store}>
        <AppRouter/>
    </Provider>
</IntlProvider>
};

export default App;

AppRouter. js

 import {history} from "../history";
 const AppRouter = () => {
 return (
    <ConnectedRouter history={history}>
        <Layout>
                <Switch>
                    <Route exact path="/login" render={() => <Login/>}/>
                </Switch>
        </Layout>
    </ConnectedRouter>

 )
};

export default AppRouter;

1 Ответ

3 голосов
/ 26 апреля 2020

Я думаю, что для вашей цели вы можете использовать history.push() для ваших целей. Вы можете использовать history.pu sh ('/') после успешного выполнения действия.

Вы можете найти другой пример в этом FAQ: https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how -do-i-access-the-history -объект-вне-из-компоненты

...