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-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')            )

相关文章
相关标签/搜索