react-31-路由配置-重定向-404-嵌套路由

1.前言

路由 是中大型项目不可或缺的
先做一些准备工作2个界面组件 ,便于路由跳转
熟悉一下路由基础

---

2. 城市组件

/src/pages/cities/index.js
写标签的 需要先写出 左半边 < 然后敲完标签 会自动生成 另外一半

import React, { Component } from 'react'

export default class index extends Component {
    render() {
        return (
            

                
城市列表
            
        )
    }
}

---

3. 搜索界面

/src/pages/citySearch/index.js

import React, { Component } from 'react'

export default class index extends Component {
    render() {
        return (
            

                
 城市搜索
            
        )
    }
}

---

4. 路由依赖安装

 npm i react-router-dom -S

---

5. 路由引用

App.js 全局使用

import RouterComponent from "./pages/router"

function App() {
  return (
    

     
    

  );
}

export default App;

---

6. 路由配置

参考vue的配置
pages/router/index.js

1.png

Router作为BrowserRouter 的别名 从 react-router-dom 引入
BrowserRouter 是对路由配置的容器 不能省

---

7. 匹配 ---path

7.1 path属性设置

Route 我习惯写成 单标签闭合标签 < 然后敲完标签后,再敲个 / 就不会 生成 另外的结束标签了

问题效果

1.gif

/ 根路径默认匹配所有,所以/search会匹配2个,显示2个
/search/a和 /search/assss/sfaf 都能匹配上, 因为默认是模糊匹配

---

7.2 精确匹配 exact

exact 设置

 return (
        

            
                
           
                
          
            
        
    )

精确匹配 只有 / 才能匹配
只有一级/search才能匹配 后面再加 2级,3级都匹配不上了

---

8.404组件

pages/404/index.js
Link 来源于路由依赖 类似 Vue 的 router-link,写法以一样,只是标签名不一样而已,to的值是想要跳转的,路由的,对应的path值

import React, { Component } from 'react';
import {
    Link  } from "react-router-dom"
export default class Component404 extends Component {
    render() {
        return (
            

                
 404     首页   
            
        )
    }
}

---

9. 404路由配置

因为404 是都匹配不到 才走404 的,所以放到路由配置的末尾
不需要写 path属性

 return (
        

            
                
                
                
            
        
    )

---

问题

2.gif

---

10. switch 解决问题

因为 404组件没写path 所以都能匹配上,
但我们是想要所有的路由 只匹配一个就行了, 所以需要引入一个
Switch 组件

10.1 引入

import {
    BrowserRouter as Router,
    Route,
    Switch,
    Redirect,
    withRouter,
    Link,
    NavLink
} from "react-router-dom";

---

10.2 使用Switch

Switch 注意大写 包裹着 所有的路由

  return (
        

            
                
                    
                    
                    
                
            
        
    )

效果就不在贴图了,要不然图片太多了

---

11. 重定向 Redirect

Redirect来源于 路由依赖具名导入

from 从哪个路由 跳转 ,也就是哪个路由需要重定向
上面的 地址栏 输入 /home 会重定向到 /

---

12.withRouter

非页面组件想拥有router功能
withRouter 来源于 路由依赖的具名导入

12.1 核心代码

class Swiper extends Component {
    render() {
        console.log("轮播图", this.props)
        return (
            

                 { this.props.history.goBack() }}>返回
                
轮播图
            
        )
    }
}
// 将路由注入 Swiper
Swiper = withRouter(Swiper)

---

12.2编程式导航

类似vue里面的导航

1.png

---

history里面 JS的相关API都有,所以可以自由操作

---

13. 非页面组件路由配置

像路由一样使用就行

---

14.嵌套路由

嵌套路由 顶层路由不要加 exact

  {/* 嵌套路由  顶层路由不要加 exact!!!!*/}

                

                    

                     {
                        return (
                            
                                
                                
                                
                                
                            
                        )
                    }}>
                    

                    

    

---

15. 嵌套路由出口

子路由是在HomeComponent里面所以出口也在HomeComponent 里面
出口直接是{this.props.children} 占位 和 vue 类似

    class HomeComponent extends Component {
    render() {
        return (
            

                {/* vue里面这样写  */}
                {/* 占位标志 */}
                {this.props.children}
                

                  

                    

                      
                        
                        
微信
                      
                    
                    

                      < NavLink to = "/home/my"
                      activeClassName = {
                        styles.selected
                      } >
                        
                        
我的
                      
                    
                    

                      
                        
                        
朋友圈
                      
                    
                    

                      
                        
                        
通讯录
                      
                    
                  
               
 
            
        );
    }
}

---

16. iconfont

这里引用了 阿里妈妈的图标库,我是使用在线的

1.png

完全可以自己在 assets/ 下面放 图标相关的文件

---

参考资料

react-rouer
react-router中文文档-1
react-router中文文档-2

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉