connected-react-router配置

今天我们介绍的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

传送门

同时官方例子也很详细

传送门