时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“位置”-connected-react-router-ReactRouter v5

reactjs - TypeError：无法读取未定义的属性“位置”-connected-react-router-ReactRouter v5

问题描述

错误 您好，我使用 React 和 Redux 构建了一个应用程序，我搜索了如何在 redux 操作后处理重定向，我从 ReactRouter 找到了 connected-react-router 包，我遵循了所有官方文档，但我收到以下错误：TypeError: Cannot读取未定义的属性“位置”，我看到了很多关于这个问题的主题，我尝试将我的 redux 版本降级到 6.0.1，我还尝试将我的历史记录移动到一个单独的文件

历史.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

应用程序.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;

标签： reactjsreact-reduxconnected-react-router

解决方案

我认为为了您的目的，您可以将history.push()其用于您的目的。操作成功后，您可以使用 history.push('/') 。

您可以在此常见问题解答中找到另一个示例：https ://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components

推荐阅读