现在我们来搞一搞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中路由的基本使用的更多相关文章

  1. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...

  2. react中路由的跳转

    1.react-router-dom 使用react-router-dom 4.4.2 在页面中直接使用 引入 i mport { Link } from 'react-router-dom' 使用 ...

  3. react中路由跳转push与replace的区别

    路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...

  4. react中路由不起作用的奇怪现象

    同样的两段Router代码,为什么一段正常,一段不起作用(也没有任何错误log提示) 瞪着眼观察也看不出为什么... 通过选中高亮显示内容相同, 为何就是有一段路由不管用呢? 折腾半天发现... 大小 ...

  5. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

  6. react中的路由模块化

    在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再r ...

  7. 在React中使用react-router-dom路由

    1,路由组件的基本实现 使用React构建的单页面应用,要想实现页面间的跳转,首先想到的就是使用路由.在React中,常用的有两个包可以实现这个需求,那就是react-router和react-rou ...

  8. 十四、 React路由(react-router4.x): 动态路由、get传值、React中使用url模块

    概述 新闻列表 -跳转-> 详情页 时,想把列表对应的id传到详情页里,可用到三种传值方法: 1.动态路由传值 2.get传值 3.localstorage传值 一.动态路由传值 [App.js ...

  9. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

随机推荐

  1. 2019-4-25 html学习笔记

    一.概念 文本   用于储存和记录文字信息的载体 html  超文本标记语言(本质就是给文本增加语义 如<h1></h1>就是给文字添加一级标题的语义) 注:互联网三大基石 有 ...

  2. XCode 设置自定义环境变量

    XCode 设置自定义环境变量 Product -> Scheme -> Edit Scheme -> 之后设置环境变量.

  3. JavaScript中子类调用父类方法的实现

    一.前言 最近在项目中,前端框架使用JavaScript面向对象编程,遇到了诸多问题,其中最典型的问题就是子类调用父类(super class)同名方法,也就是如C#中子类中调用父类函数base.** ...

  4. A Nice Paper About Mobile Data Offloading

    关于Mobile Data Offloading这个研究领域的Paper基本上该有的都看过了,我想即使再有也无非是那些套路,新不到哪去.同样,这篇paper也是这样,它的出发点是改进原有的利用ad h ...

  5. Win10手记-为应用集成日志工具Logger

    日志工具由来已久,是很受大家欢迎的debug工具.其中.NET平台上很出名的是log4net,但是由于Windows 10通用应用项目没有了System.Configuration引用,所以也就不能很 ...

  6. 课程四(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 ...

  7. 线程安全-005-synchronized其他概念

    一.Synchornized锁重入 例子程序: package com.lhy.thread01; public class SyncDouble1 { public synchronized voi ...

  8. spring cloud+.net core搭建微服务架构:配置中心(四)

    前言 我们项目中有很多需要配置的地方,最常见的就是各种服务URL地址,这些地址针对不同的运行环境还不一样,不管和打包还是部署都麻烦,需要非常的小心.一般配置都是存储到配置文件里面,不管多小的配置变动, ...

  9. Mysql-8 配置主从复制(基于二进制日志)

    目录 1. 实验环境 2. 安装MySQL8 3. 配置主从复制 4. 配置复制用户 5. 数据的同步 6. 配置从节点 7. 测试主从复制 1. 实验环境 System IP Host CentOS ...

  10. Spring Boot Actuator监控应用

    微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...