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(

</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(

</Router>

</Provider>,

document.getElementById('root')

)

打赏赞(0)

一	二	三	四	五	六	日
« 9月				12月 »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

评论 取消回复

评论取消回复