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>
        );
    }
}

Answer 1

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

在React-Router V4升级中实施ConnectedRouter的问题

1 个答案: