今天我们介绍的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
同时官方例子也很详细
