代码之家  ›  专栏  ›  技术社区  ›  Konstantin

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

  •  0
  • Konstantin  · 技术社区  · 7 年前

    我刚刚迁移到react router,react router dom v4.3.1,installed history v4.9。早些时候,我所有连接到商店的组件都有路由器道具。现在,他们说一定有一个历史道具。不过,我哪里也找不到,尤其是应用程序组件。

    根目录:

    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)
    

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

    应用程序内组件I使用{children}道具呈现路由

    1 回复  |  直到 7 年前
        1
  •  2
  •   Dupocas    7 年前

    这个 history 道具由您的供应商提供。若要在组件的道具中序列化它,请使用 withRoute 临时