react-router 3 文檔: https://github.com/ReactTraining/react-router/blob/v3/docs/API.md
react-router 4 文檔: https://reacttraining.com/react-routerreact
1. react-router 3 中的 useRouterHistory(createHistory) :git
依賴: 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.jsgithub
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, ...)
)
}web
src => main.jsredux
import configureStore, {history, reduxRouterMiddleware} from './store'
import App from './containers/App.js'
export const store = configureStore()
reduxRouterMiddleware.listenForReplays(store)react-router
ReactDom.render(
<Provider store={store}>
<Router>
<Route path="/" component={App}/>
</Router>
</Provider>,
document.getElementById('root')
)app
2. react-router 4 中的 useRouterHistory(createHistory) 變成了什麼 :dom
react-router 4 中沒有 useRouterHistory(createHistory) 這種寫法了,取而代之的是 BrowserRouter。ide
依賴: react-router (通用庫,web 和 Native 均可用),react-router-dom (web用)spa
用法: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') )