React-router的基本使用
1、安装使用
$ npm install -S react-router
import { Router, Route, hashHistory } from 'react-router';render((<Router history={hashHistory}><Route path="/" component={App}/></Router> ), document.getElementById('app'));
1.1、版本问题
react-router 有多个版本,2.x/3.x - 4.x版本有比较大的改动,并且互相不兼容,2.x/3.x 和 4.x 版本的语法有非常大的不同。并且 react-router 和 react 的某些版本也会有冲突
目前使用 react-router 的 3.x 版本下面的版本可以运行成功。
"dependencies": {"react": "^16.2.0","react-dom": "^16.2.0","react-router": "^3.0.2","react-scripts": "3.1.1" }
2、Router 组件
2.1、JSX 的 Route 组件实现路由
路由器Router
就是React的一个组件。Router
组件本身只是一个容器,真正的路由要通过Route
组件定义。
//入口文件 index.js import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, hashHistory } from 'react-router';ReactDOM.render((<Router history={hashHistory}><Route path="/" component={App}><Route path="/repos" component={Repos}/></Route> </Router> ), document.getElementById('app'));
2.1、route 数组对象实现路由
子路由也可以不写在Router
组件里面,单独传入Router
组件的routes
属性。
let routes = <Route path="/" component={App}><Route path="/repos" component={Repos}/> </Route>;<Router routes={routes} history={browserHistory}/>
或者是更方便的写法(推荐写法):
const routes = [{path: '/',component: App,indexRoute: { component: DefaultComponent },childRoutes: [{ path: 'about', component: About },{ path: 'inbox', component: Inbox },] }]React.render(<Router routes={routes} />, document.body)
3、路径匹配的组件
react-router 是按 URL 来匹配组件的。
React.render((<Router><Route path="/" component={App}><Route path="about" component={About} /><Route path="inbox" component={Inbox}><Route path="messages/:id" component={Message} /></Route></Route></Router> ), document.body)
如果 URL 匹配到某个组件,并且 URL 上并没有该组件的上层组件(即包含着它的上层 Route),此时仍然会匹配到该组件的上层 Route。
比如下面:用绝对路径表示 Message 组件,当 URL 是 /message/aaa 时,仍会匹配到 APP 和 Inbox 组件,然后再是 Message 组件。
React.render((<Router><Route path="/" component={App}><IndexRoute component={Dashboard} /><Route path="about" component={About} /><Route path="inbox" component={Inbox}>{/* 使用 /messages/:id 替换 messages/:id */}<Route path="/messages/:id" component={Message} /></Route></Route></Router> ), document.body)
想要在某组件内渲染它的下层即子路由,在组件内使用 {this.props.children} 语法。
转载于:https://www.cnblogs.com/wenxuehai/p/11387261.html
React-router的基本使用相关推荐
- React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
- router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
- 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 v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a "dirty" state and we want t ...
- 使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- 初探 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 ...
最新文章
- 右边补0 润乾报表_关于润乾报表的补充说明 -
- dig+host+nslookup 域名解析命令
- 深入探究Python中的字典容器
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
- 目标检测 | RetinaNet:Focal Loss for Dense Object Detection
- Java入门教程——下载JAVA
- 【系统分析师之路】2020年下系统分析师论文写作真题
- 空气螺旋桨,让水下动物不再受伤害
- Win10激活提示“无法连接到你组织的激活服务器”如何解决【解决方法】
- #151: 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字、1位识别码和3位分隔符,其规定格式如“x-xxx-x...
- LUOGU P1512 伊甸园日历游戏
- 单片机 嵌入式 毕业设计题目选题推荐
- 三行代码,使用第三方网站统计访客数据
- 鲁大师便捷查看硬盘参数
- 硬盘问题导致无法开机
- Python操作word基础
- idea连接oracle可插拔数据库报ORA-12505
- quartz和timer的区别
- 微信回应转错帐被拉黑事件 支付宝:我们比较蠢 没法那么洒脱
- 【selenium学习笔记】selenium自动化测试环境安装
热门文章
- 数组中查找並返回数组_java数组查找常见情况
- [python] 列表解析式的高效与简洁
- 锁定机制和数据并发管理(笔记)
- Python全栈开发之3、数据类型set补充、深浅拷贝与函数
- 【iCore3 双核心板_ uC/OS-III】例程五:软件定时器
- netif_start_queue/netif_wake_queue/netif_stop_queue
- Pytorch cifar100离线加载二进制文件
- 构建Java Web开发环境
- centos arm-linux-gcc,CentOS 6.4配置arm-linux-gcc交叉环境
- C语言动态数组建立方法