react-router 3 中的 useRouterHistory(createHistory) 到了 react-router 4 变成了什么？
react-router 3 文档： https://github.com/ReactTraining/react-router/blob/v3/docs/API.md
react-router 4 文档： https://reacttraining.com/react-router
1. react-router 3 中的 useRouterHistory(createHistory) ：
依赖： react-router,redux-simple-router
作用：useRouterHistory is a history enhancer that configures a given createHistory factory to work with React Router.
This allows using custom histories in addition to the bundled singleton histories.
It also pre-enhances the history with the useQueries and useBasename enhancers from history.
useRouterHistory是一个history增强器，它将给定的createHistory工厂配置为使用React Router。
这允许使用除了捆绑的单例(单例模式：一个类只能有一个实例存在，并且只返回一个对象)历史之外的自定义历史。
它还通过历史记录中的useQueries和useBasename增强器预先增强了历史history
用法：src => store => index.js
import createHistory from ‘history/lib/createHashHistory’
import {useRouterHistory} from ‘react-router’
import {syncHistory} from ‘redux-simple-router’
export const history = useRouterHistory(createHistory)({queryKey: false});
export const reduxRouterMiddleware = syncHistory(history);
export default function configureStore(preLoadedState) {
return createStore(
rootReducer,
preLoadedState,
applyMiddleware(…, reduxRouterMiddleware, …)
)
}
src => main.js
import configureStore, {history, reduxRouterMiddleware} from ‘./store’
import App from ‘./containers/App.js’
export const store = configureStore()
reduxRouterMiddleware.listenForReplays(store)
ReactDom.render(
<Provider store={store}>
<Router>
<Route path=”/” component={App}/>
</Router>
</Provider>,
document.getElementById(‘root’)
)
2. react-router 4 中的 useRouterHistory(createHistory) 变成了什么 ：
react-router 4 中没有 useRouterHistory(createHistory) 这种写法了，取而代之的是 BrowserRouter。
依赖： react-router (通用库，web 和 Native 都可用),react-router-dom (web用)
用法：src => store => index.js
export default function configureStore(preLoadedState) {
return createStore(
rootReducer,
preLoadedState,
applyMiddleware(…, …)
)
}
src => main.js
import {BrowserRouter as Router, Route} from ‘react-router-dom’
import configureStore from ‘./store’
import App from ‘./containers/App.js’
export const store = configureStore()
ReactDom.render(
<Provider store={store}>
<Router>
<Route path=”/” component={App}/>
</Router>
</Provider>,
document.getElementById(‘root’)
)