美文网首页
connected-react-router配置

connected-react-router配置

作者: 龚达耶 | 来源:发表于2019-02-20 00:45 被阅读0次

    今天我们介绍的connected-react-router是redux用来绑定路由的。

    如果还没有看过我之前关于redux介绍的可以参照

    传送门

    里面的sample5就是关connected-react-router的。

    传送门

    我们当前connected-react-router的版本为v6,需要react router大于v4,并且react-redux大于v6,react大于v16.4.0

    image.png
     yarn add connected-react-router
    

    首先我们要引入connectRouter并且传递history

    import { applyMiddleware, compose, createStore, combineReducers } from 'redux'; // 引入combineReducers
    import { connectRouter } from 'connected-react-router';
    

    注意这里的Key只能是router

    const allReducers = (history) => combineReducers({  //使用combineReducers 将两个reducer变为一个
      router: connectRouter(history), // 添加路由reducer通过传递history给connectRouter
      reducer1,
      reducer2
    })
    

    接下来在创建redux store的时候我们首先要创建history对象

    import { createBrowserHistory } from 'history';
    const history = createBrowserHistory();
    

    然后将history的对象放入createStore

    const store = createStore(
      allReducers(history), //将history传递
      {reducer1:[1], reducer2:[2]}, // 替换为allReducers 并且设置初始state 作为第二个参数
      allStoreEnhancers
    );  
    

    使用routerMiddleware(history) 如果你想 dispatch history actions (e.g. to change URL with push('/path/to/somewhere')).

    const allStoreEnhancers = compose(
      applyMiddleware(routerMiddleware(history),thunk), //使用routerMiddleware(history)如果需要dispatch history给connectRouter
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    ) // 其作用是把一系列的函数,组装生成一个新的函数,并且从后到前,后面参数的执行结果作为其前一个的参数。
    

    最后用react-roter的ConnectedRouter并且传递history对象作为props

    ReactDOM.render(
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Switch>
            <Route exact path="/" render={() => (<App />)} />
          </Switch>
        </ConnectedRouter>
      </Provider>
      , document.getElementById('root')); // Provider使用context将store传给子组件
    

    本例子sample5是将所有的配置都放在了index.js里

    如果需要分开配置的话可以参考sample6

    传送门

    同时官方例子也很详细

    传送门

    相关文章

      网友评论

          本文标题:connected-react-router配置

          本文链接:https://www.haomeiwen.com/subject/apnqyqtx.html