Question

我刚刚迁移到react-router，react-router dom v4.3.1，已安装历史记录v4.9。早些时候，我所有连接到商店的组件都配备了路由器道具。现在，他们说必须有一个历史道具。但是，我在任何地方都没有得到它，尤其是在App组件中。

根：

import React, { Component } from "react";
import { Provider } from "react-redux";
// import { BrowserRouter, Route, browserHistory, Switch } from "react-router";
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";
import { hot } from 'react-hot-loader'
import { ConnectedRouter } from 'connected-react-router'
import configureStore, {history} from '../store/configureStore'
import App from "./App";
import Startpage from "./startpage";
import PatientSearch from "./routes/patient/patientSearch";
import Technician from "./routes/technician/technician";
import Notes from "./routes/notes/notes";
import DeliveryReports from './routes/admin/deliveryReports/reports'

const store = configureStore(/* provide initial state if any */)
class Root extends Component {

  render() {
    console.log('propsroot', this.props)
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          {/*<Router onUpdate={() => window.scrollTo(0, 0)}>*/}
            <App>
              <Switch>
                <Route exact path="/" component={Startpage} />
                <Route
                    component={PatientSearch}
                    path="/patient/search"
                />

                <Route
                    component={Technician}
                    path="/technician"
                />

                <Route
                    component={Notes}
                    path="/notes"
                />

                <Route
                    component={DeliveryReports}
                    path="/delivery_reports"
                />

              </Switch>
            </App>


          {/*</Router>*/}
        </ConnectedRouter>
       </Provider>
    );
  }
}
export default hot(module)(Root)

ConfigureStore：

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { connectRouter } from 'connected-react-router'

import promiseMiddleware from '../middleware/promiseMiddleware';
import loggerMiddleware from 'redux-logger';
import * as reducers from '../reducers/';
import { reducer as formReducer } from 'redux-form'
import app from '../reducers/app'
import {createBrowserHistory} from "history";

export const history = createBrowserHistory()
const reducer = combineReducers({...reducers.default, router:connectRouter(history), form:formReducer });
const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware,
    promiseMiddleware
)(createStore);

export default function configureStore(initialState) {
    const store =  createStoreWithMiddleware(
        reducer,
        initialState,
        window.devToolsExtension && window.devToolsExtension()
    );
    if (module.hot) {
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers/index');
            store.replaceReducer(nextRootReducer);
        });
    }
    return store;
}

在App组件中，我使用{children}道具渲染路线

Answer 1

history道具由您的提供商提供。要将其序列化到组件的道具中，请使用withRoute HOC

为什么我的“连接”组件中没有历史记录道具？

1 个答案: