笔记react router 4（三）

　　上一篇我们说到了路由组件的嵌套。想必你已经运用自如了。那么，这一次我们来聊一聊4.X中Router的变更。

在3.X中我们若使用路由的模式，可通过在Router上配置history的值即可。

例如，

import { Router, Route, hashHistory} from "react-router"
import routes from "./routes"<Router history={hashHistory} routes={routes}><Route path="/" component={App}/>
</Router>

在4.X中提供几种不同的路由组件来替代history属性的作用，分别是

import { BrowserRouter } from 'react-router-dom'<BrowserRouterbasename={optionalString}forceRefresh={optionalBool}getUserConfirmation={optionalFunc}keyLength={optionalNumber}
><App/>
</BrowserRouter>

import { HashRouter } from 'react-router-dom'<HashRouter><App/>
</HashRouter>

<MemoryRouter> 一般用于测试或者无浏览器的环境中，像是react native中

<MemoryRouterinitialEntries={[ '/one', '/two', { pathname: '/three' } ]} initialIndex={1} > <App/> </MemoryRouter>

<StaticRouter> 一般用于服务端，永远不会改变location

<StaticRouter location={req.url} context={context}><App/>
</StaticRouter>

需要注意的是，router组件只能有一个子元素

转载于:https://www.cnblogs.com/zyl-Tara/p/9685935.html

笔记react router 4（三）相关推荐

React Router 中文文档（一）
React Router 中文文档(一) React Router 中文文档(一) 官方英文文档 - https://reacttraining.com/rea... 版本 - v4.2.0 < ...
React Router缓存路由
本篇算是读书笔记,书是<深入理解React Router:从原理到实践> 以下代码实现基于react-router5,demo地址,代码里有微前端相关demo,所以缓存路由默认没开,src ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
hitchhiker部署_《 Hitchhiker的React Router v4指南》：路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由在React router中有三种类型的 ...

笔记react router 4（三）

笔记react router 4（三）相关推荐

最新文章

热门文章