【react router路由】<Router> <Siwtch> <Route>标签
博客
https://www.jianshu.com/p/ed5e56994f13?from=timeline
文档
http://react-guide.github.io/react-router-cn/docs/API.html
https://react-guide.github.io/react-router-cn/
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"));
---------------------
作者:mapbar_front
来源:CSDN
原文:https://blog.csdn.net/mapbar_front/article/details/72811425
版权声明:本文为博主原创文章,转载请附上博文链接!
【react router路由】<Router> <Siwtch> <Route>标签的更多相关文章
- React学习(3)——Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 文档中介绍 ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- react ---- Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...
- < react router>: (路由)
< react router> (路由): 思维导图: Atrial 文件夹下的index.js 文件内容: import React, { Component } from 'rea ...
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
- 全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下. Backbone ...
- vue工程化与路由router
一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router ...
- react 中的路由 Link 和Route和NavLink
route是配置,link是使用 https://blog.csdn.net/chern1992/article/details/77186118(copy) 嵌套路由一般使用Route,类似于vue ...
随机推荐
- cf339d Xenia and Bit Operations
Xenia and Bit Operations Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- (转载) STL中map用法详解
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...
- DelphiXE8FMX工程实现无边框托动(发送消息)
1.引用单元 uses Winapi.Windows, FMX.Platform.Win, Winapi.Messages; 2.发送消息 //发送系统消息SendMessage(FmxHandleT ...
- [C++]怎么将.h和.cpp文件分别放在不同的目录
相关资料: http://blog.csdn.net/onafioo/article/details/8775501 具体操作: 1.找到.h文件目录.2.将所以的.h文件剪切到“include”目录 ...
- JavaScript 框架 jQuery 的下载和安装
jQuery 简介: jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 很容易学习. jQuery 下载: // 官网: htt ...
- HeadFirst jsp 08 无脚本JSP
web页面设计人员真的必须懂 java ? web页面人员可以很快学习 EL 语言. 目前不知道 EL 应用前景如何, 但是我们香港系统没有使用 EL. include 指令 include指令告诉容 ...
- dp + 状态压缩 - Codeforces 580D Kefa and Dishes
Kefa and Dishes Problem's Link Mean: 菜单上有n道菜,需要点m道.每道菜的美味值为ai. 有k个规则,每个规则:在吃完第xi道菜后接着吃yi可以多获得vi的美味值. ...
- JSON动态生成树
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 从此sudo不再输密码
#sudo visudo 最后一次输入密码. 在最后一行加入: xxx ALL=NOPASSWD: ALL xxx即为你当前使用的用户名,Ctrl+X,保存退出. 从此告别每次都要输密码的时代.
- dedecms中如何去掉文章页面的广告
在arcticle_arcticle.htm页面找到广告调用代码{dede:myad name='myad'/}全部去掉就好了,如果要换成自己的广告,就换广告位标识 myad 就可以了