react路由基础(Router、Link和Route)
来源:互联网 发布:java 线程池 添加任务 编辑:程序博客网 时间:2024/06/06 06:33
Facebook对react进行持续的改进,路由作为其中最重要的一部分,在4.0版本对其进行了大量的优化,总的来说,简单易用!
之前使用react路由的时候,我们引入的是react-router包。
现在改版之后,我们引入的包是react-router-dom包。
改版之后的react-router-dom路由,我们要理解三个概念,Router、Route和Link。
1、Router
Router我们可以把它看做是react路由的一个路由外层盒子,它里面的内容就是我们单页面应用的路由以及路由组件。
使用方式:
import { BrowserRouter as Router } from "react-router-dom";class Main extends Component{ render(){ return( <Router> <div> //otherCoding </div> </Router> ) }}
2、Link
Link是react路由中的点击切换到哪一个组件的链接,(这里之所以不说是页面,而是说组件,因为切换到另一个界面只是展示效果,react的本质还是一个单页面应用-single page application)。
基本使用方式:
import { BrowserRouter as Router, Link} from "react-router-dom";class Main extends Component{ render(){ return( <Router> <div> <ul> <li><link to='/'>首页</Link></li> <li><link to='/other'>其他页</Link></li> </ul> </div> </Router> ) }}
特别说明:第一、Router下面只能包含一个盒子标签,类似这里的div。
第二、Link代表一个链接,在html界面中会解析成a标签。作为一个链接,必须有一个to属性,代表链接地址。这个链接地址是一个相对路径。
第三、Route,是下面要说的组件,有一个path属性和一个组件属性(可以是component、render等等)。
3、Route
Route代表了你的路由界面,path代表路径,component代表路径所对应的界面。
使用方式:
import React,{ Component } from "react";import { render } from "react-dom";import { BrowserRouter as Router, Route, Link } from "react-router-dom";class Home extends Component{ render(){ return ( <div>this a Home page</div> ) }}class Other extends Component{ render(){ return ( <div>this a Other page</div> ) }}class Main extends Component{ render(){ return ( <Router> <div> <ul> <li><Link to="/home">首页</Link></li> <li><Link to="/other">其他页</Link></li> </ul> <Route path="/home" component={Home}/> <Route path="/other" component={Other}/> </div> </Router> ) }}render(<Main />,document.getElementById("root"));
阅读全文
0 0
- react路由基础(Router、Link和Route)
- React系列-Link和Route渲染路由区别
- vue基础动态路由,嵌套路由router-link切换
- Angular路由 ng-route和ui-router的区别
- Angular路由 ng-route和ui-router的区别
- react-router 4.x(路由)
- React-router路由实践
- React-router路由实践
- react-router路由
- React-router路由实践
- react-router 路由匹配
- react-router 路由
- (二)创建react-router路由
- 从 React Router 谈谈路由
- 浅谈React Router动态路由
- AngularJS 路由:ng-route 与 ui-router
- AngularJS 路由:ng-route 与 ui-router
- 再谈路由之——ng-route和ui-router
- Problem C: 平面上的点和线——Point类、Line类 (IV)
- ubuntu ROS RVIZ
- BZOJ 4484 [Jsoi2015] 最小表示
- Problem D: 平面上的点和线——Point类、Line类 (V)
- JQuery二
- react路由基础(Router、Link和Route)
- 以NORTHWIND订单数据为例制作RFM模型
- 231. Power of Two--判断一个数是否为2的幂
- 并发减库存 redis vs mysql
- Linux虚拟机连不上网
- mysql之 binlog维护详细解析(开启、binlog相关参数作用、mysqlbinlog解读、binlog删除)
- 5月29号
- LR(0) 文法分析器
- ubuntn 系统中安装pycharm ,注册码和设置搜狗输入法