react路由
时间:2019-11-13
本文章向大家介绍react路由,主要包括react路由使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先下载路由
1 npm install react-router-dom --save-dev
然后新建两个页面
component1.js
1 import React from 'react'; 2 3 class Component1 extends React.Component{ 4 render(){ 5 return ( 6 <div> 7 <a href="#/component2">去component2</a> 8 </div> 9 ); 10 } 11 } 12 13 export default Component1
component2.js
import React from 'react'; class Component2 extends React.Component{ render(){ return ( <div> <a href="/">回到component1</a> </div> ); } } export default Component2
注意:React.Component的Component中C一定要大写
然后新建Routers.js
1 import React from 'react'; 2 import {HashRouter, Route, Switch} from 'react-router-dom'; 3 import Component1 from '../view/Component1'; 4 import Component2 from '../view/Component2'; 5 6 const BasicRoute = () =>( 7 <HashRouter> 8 <Switch> 9 <Route exact path='/' component={Component1}/> 10 <Route exact path='/component2' component={Component2}/> 11 </Switch> 12 </HashRouter> 13 ) 14 15 export default BasicRoute;
在index.js中编写如下:
1 import React from 'react'; 2 import ReactDOM from 'react-dom'; 3 import Router from './router/Routers' 4 5 ReactDOM.render(<Router />, document.getElementById('root'));
这样完成了一个简单的路由跳转
路由的exact属性
具体区别如下:
1 <Route path='/' component={Home} /> 2 <Route path='/page' component={Page}> 3 //这种情况下,如果匹配路由path='/page',那么会把Home也会展示出来。 4 //既路由path='/page'会匹配路由path='/'和路由path='/page'
1 <Route exact path='/' component={Home} /> 2 <Route path='/page' component={Page} /> 3 //这样匹配路由path='/page',只会匹配到Page组件
原文地址:https://www.cnblogs.com/dropInInt/p/11849737.html
- Goroutine背后的系统知识
- 从零到 Go:Google感恩节火鸡涂鸦开发纪实
- JBPM4.4(1)-简单工程的搭建
- 未绑定元素“mx:Panel”的前缀“mx”
- [Go 语言社区] Golang架构底层函数图片保存-原创
- [Go 语言社区]Golang架构--服务器与客户端自定义传输规则--原创
- Go语言 -浮点数
- android开发列表界面
- Java中Queue和BlockingQueue的区别
- android使用Activity
- Golang入门-- 2D的图形库学习
- Go语言--简单聊天室程序
- Go语言编程中判断文件是否存在是创建目录的方法
- jquery clone()表格之后查找里边的元素
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法