TypeError:无法读取未定义的- connected-react-router - ReactRouter v5的属性“”location“”

Question

​

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

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;

Answer 1

我认为对于您的目的，您可以使用history.push()来实现您的目的。您可以在操作成功后使用history.push('/')。

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