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

相關文章
相關標籤/搜索