React中路由的基本使用
现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥。
注意下面我们使用的是React-Router-DOM
React中的路由基本使用还是满简单的,零碎的小东西有点多,所以我直接把他们揉到一起做了一个小例子,代码我都写上注释了,应该挺简单易懂的
注意:以下所有操作均运行在搭好的React环境中
这个小例子里主要有:路由的使用,精准匹配,路由的高亮,子路由,包容性路由变为排他性路由,动态路由,路由转化
1.安装react-router-dom
yarn add react-router-dom
2.然后我们直接上代码,照着代码操作就可以了
import React, { Component } from 'react' import './index.css'
import {
Route,
Switch,
Link,
Redirect,
NavLink,
BrowserRouter as Router
} from 'react-router-dom' class Home extends Component{
render(){
return (
<Router>
<div>
<ul> <NavLink to="/food" activeClassName="active">food</NavLink><hr/>
<NavLink to="/wiki" activeClassName="active">wiki</NavLink><hr/>
<NavLink to="/profile" activeClassName="active">profile</NavLink><hr/>
</ul> {/* 使用Switch是为了将React默认的包容性路由变为排他性路由 */}
{/* 包容性路由:/food 既能匹配到/ 又能匹配到/food
排他性路由:只能匹配一个 /food就只能匹配到/food */} <Switch>
{/*Redirect 是路由转化 即匹配到某一个路由转化到另一个路由 */}
<Redirect from="/" exact to="/food"/>
<Route path="/food" component={Food}/>
{/* 除了用Switch外也可以用exact来避免一个路由匹配多个,exact是精准匹配
但是使用exact时需要每个路由上都加上exact才能达到和Switch一样的效果 */}
{/* <Route path="/wiki" exact component={Wiki}/> */}
<Route path="/wiki" component={Wiki}/>
<Route path="/profile" component={Profile}/>
<Route component={Page404}/>
</Switch>
</div>
</Router>
)
}
} //定义路由使用的组件 //在Food中定义子路由
const Food = () => (
<div>
<Link to="/food/foodlist/3">foodlist</Link><br/>
<Link to="/food/foodmenu">foodmenu</Link>
<Route path="/food/foodlist/:id" component = {Foodlist}></Route>
<Route path="/food/foodmenu" component = {Foodmenu}></Route>
</div>
) const Wiki = () => (
<div>Wiki</div>
) const Profile = () => (
<div>profile</div>
) const Page404 = () => (
<div>page not found.</div>
) //定义路由使用的组件结束 //子路由调用的组件
const Foodlist = () => (
<div>子路由的Foodlist</div>
)
const Foodmenu = () => (
<div>子路由的Foodmenu</div>
) export default Home
特别注意:/index.css是我引入的一个高亮的样式
index.css里面的代码
.active {
font-size: 50px;
}
运行结果:
这个运行结果丑是丑了点,但是功能没瑕疵,和我一样,不靠颜值吃饭
React中路由的基本使用的更多相关文章
- React中路由传参及接收参数的方式
注意: 路由表改变后要重启服务 方式 一: 通过params 1.路由表中 <Route path=' /s ...
- react中路由的跳转
1.react-router-dom 使用react-router-dom 4.4.2 在页面中直接使用 引入 i mport { Link } from 'react-router-dom' 使用 ...
- react中路由跳转push与replace的区别
路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...
- react中路由不起作用的奇怪现象
同样的两段Router代码,为什么一段正常,一段不起作用(也没有任何错误log提示) 瞪着眼观察也看不出为什么... 通过选中高亮显示内容相同, 为何就是有一段路由不管用呢? 折腾半天发现... 大小 ...
- React中的路由系统
React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...
- react中的路由模块化
在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再r ...
- 在React中使用react-router-dom路由
1,路由组件的基本实现 使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由.在React中,常用的有两个包可以实现这个需求,那就是react-router和react-rou ...
- 十四、 React路由(react-router4.x): 动态路由、get传值、React中使用url模块
概述 新闻列表 -跳转-> 详情页 时,想把列表对应的id传到详情页里,可用到三种传值方法: 1.动态路由传值 2.get传值 3.localstorage传值 一.动态路由传值 [App.js ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
随机推荐
- 2019-4-25 html学习笔记
一.概念 文本 用于储存和记录文字信息的载体 html 超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义) 注:互联网三大基石 有 ...
- XCode 设置自定义环境变量
XCode 设置自定义环境变量 Product -> Scheme -> Edit Scheme -> 之后设置环境变量.
- JavaScript中子类调用父类方法的实现
一.前言 最近在项目中,前端框架使用JavaScript面向对象编程,遇到了诸多问题,其中最典型的问题就是子类调用父类(super class)同名方法,也就是如C#中子类中调用父类函数base.** ...
- A Nice Paper About Mobile Data Offloading
关于Mobile Data Offloading这个研究领域的Paper基本上该有的都看过了,我想即使再有也无非是那些套路,新不到哪去.同样,这篇paper也是这样,它的出发点是改进原有的利用ad h ...
- Win10手记-为应用集成日志工具Logger
日志工具由来已久,是很受大家欢迎的debug工具.其中.NET平台上很出名的是log4net,但是由于Windows 10通用应用项目没有了System.Configuration引用,所以也就不能很 ...
- 课程四(Convolutional Neural Networks),第三 周(Object detection) —— 2.Programming assignments:Car detection with YOLOv2
Autonomous driving - Car detection Welcome to your week 3 programming assignment. You will learn abo ...
- 线程安全-005-synchronized其他概念
一.Synchornized锁重入 例子程序: package com.lhy.thread01; public class SyncDouble1 { public synchronized voi ...
- spring cloud+.net core搭建微服务架构:配置中心(四)
前言 我们项目中有很多需要配置的地方,最常见的就是各种服务URL地址,这些地址针对不同的运行环境还不一样,不管和打包还是部署都麻烦,需要非常的小心.一般配置都是存储到配置文件里面,不管多小的配置变动, ...
- Mysql-8 配置主从复制(基于二进制日志)
目录 1. 实验环境 2. 安装MySQL8 3. 配置主从复制 4. 配置复制用户 5. 数据的同步 6. 配置从节点 7. 测试主从复制 1. 实验环境 System IP Host CentOS ...
- Spring Boot Actuator监控应用
微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...