zoukankan      html  css  js  c++  java
  • 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')
                )

  • 相关阅读:
    slf4j简介(一)
    Spring Framework--AOP(1)--
    Spring Framework--Data Access(1)--Transaction Management(2)
    Spring Framework--Data Access(1)--Transaction Management(2)
    Spring Framework--Data Access(1)--Transaction Management(1)
    Spring Framework--Ioc Container(1)--Dependencies(2)--depends-on、lazy-init、autowire、mothod injection
    车票100–火车票接口开发文档
    SAE AppConfig的重定向和Url重写
    MySQL Order By Rand()效率
    面试时应该如何应答?
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/7889825.html
Copyright © 2011-2022 走看看