reactjs - 使用 react-router v4 升级实现 ConnectedRouter 的问题

Question

我升级为使用 react-router v4 (rr-v4) 并读到 react-router-redux 已被弃用，并且 rr-v4 使用 connected-react-router。这样做我现在收到以下错误：

该道具location在 中标记为必填ConnectedRouter，但其值为undefined。

我似乎无法弄清楚我做错了什么。我有很多代码，所以我将尝试分享相关的内容：

rootReducer:
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'
import { reducer as oidcReducer } from 'redux-oidc';
...
const rootReducer = (history) => combineReducers({
    routing: connectRouter(history),
    oidc: oidcReducer,
...
export default rootReducer;

store.js:
import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router'
import { createBrowserHistory } from 'history'
...
export const history = createBrowserHistory()

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const initialState = {};

const createStoreWithMiddleware = composeEnhancers(
    applyMiddleware(loggerMiddleware, routerMiddleware(history), thunkMiddleware)
)(createStore);

const store = createStoreWithMiddleware(rootReducer(history), initialState);
...
export default store;

index.js:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { OidcProvider } from 'redux-oidc';
import store, { history } from './store';
import { App } from './App';
import userManager from './_helpers/userManager';
import { ErrorBoundary } from './_components/ErrorBoundary';
import "./web.config";

render(
    <ErrorBoundary>
      <Provider store={store}>
        <OidcProvider store={store} userManager={userManager}>
          <App history={history} />
        </OidcProvider>
      </Provider>
    </ErrorBoundary>,
    document.getElementById('app')
);

App.js:
import React from 'react';
import { ConnectedRouter } from 'connected-react-router'
import { Route, Switch } from 'react-router-dom';
...
class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
    }
...

    render() {
        const { history } = this.props;
        return (
                <ConnectedRouter history={history}>
                    <div>
                        <Route path="/" render={() => (<div>HOME</div>)} />
                        <Route path="/test" render={() => (<div>TEST</div>)} />
                    </div>
                </ConnectedRouter>
        );
    }
}

标签： reactjsreact-router-v4connected-react-router

Answer 1

rootReducer 下的键必须是router，而不是routing。