（十四）React路由的使用及注意事项

一.基本使用:

npm i -S react-router-dom
??1)明确好界面中的导航区、展示区

??2)导航区的a标签改为Link标签
Demo
??3)展示区写Route标签进行路径的匹配

??4)的最外侧包裹了一个或

使用link的进行组件的切换
在入口的位置，进行注册路由（也就是Vue路由的位置点）

举例子：

此案例只有一部分就是展示在首页的配置，左侧是你的导航栏位置，右侧是你的展示区位置，也就是需要展示你自己的组件的位置，路由的入口。但是不像vue的样子路由的入口是总代替的，React的是单独注册的路由组件，进行在展示区展示你自己的组件。所以后续会分出来进行一般组件和路由组件

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

                

                    

                        
React Router Demo
                    
                
                

                    

                        

                            {/* 原生html中，靠跳转不同的页面 */}
                            {/* About
                            Home */}
                            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
                            About
                            Home
                        
                    
                    

                        

                            

                                {/* 注册路由 */}
                                
                                
                            
                        
                    
                
            
        )
    }
}

注意必须要包裹 BrowserRouter 或者 HashRouter

可以在index.js中进行操作

ReactDOM.render(
    
        
    ,
    document.getElementById('root')
)

二.NavLink:

区别于Link：
进行导航栏的跳转 会默认添加className active ，可以修改activeClassName 这样就会在点击的时候自动添加相应的className

1) NavLink可以实现路由链接的高亮，通过activeClassName指定样式名
2) 标签体内容是一个特殊的标签属性
3) 通过this.props.children可以获取标签体的内容
4) 在自己封装navlink的时候，可以在上面采用{...this.props}

三.封装NavLink：

在使用的时候可以把NavLink进行封装一下，然后使用组件的方式进行加载，这样更方便。
新建一个MyNavLink ，将标签属性全部放上去，

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
	render() {
		// console.log(this.props);
		return (
			
		)
	}
}

使用：

import MyNavLink from './components/MyNavLink'

About

就是这么用 其余位置可以继续注册路由 方便你进行相应的展示

四.Switch组件

引入switch组件 进行包裹 就会出现只匹配一次

1. 通常情况下，path和component是一一对应的关系。
2. Switch可以提高路由匹配效率(单一匹配)。
   举例子：引入之后使用

import {Route,Switch} from 'react-router-dom'

{/* 注册路由 */}

	
	
	

五.解决多级路径刷新页面样式丢失的问题

为什么是会出现这种的问题，就是你在全局引入boostrap的时候，使用的是绝对路径，然而你使用嵌套路由的时候，会修改你的url路径，然后就会默认给你的资源文件路径加上多级url导致获取不到相应的文件。解决方法：

??1)public/index.html 中 引入样式时不写 ./ 写 / （常用）
??2)public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
??3)使用HashRouter。
访问不到的时候就会进行返回index.html

六.路由的精准匹配和模糊匹配：

模糊匹配：你输入的路径和匹配的部分一致，而且匹配的顺序一致

精准匹配：在注册路由的时候 添加 exact={true} 这样路由必须一样

1）默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2）开启严格匹配：
3）严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

七.路由的重定向：

redirect:

??1)一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
??2)具体编码：

八.路由组件和一般组件的区别：

路由组件：一般放在pages ， 路由组件会收到相应的props 就是这种 ，这种就是路由组件

一般组件：就放在components 一般组件不会收到props

1)写法不同：
?????一般组件：
?????路由组件：
2)存放位置不同：
?????一般组件：components
?????路由组件：pages
3)接收到的props不同：
?????一般组件：写组件标签时传递了什么，就能收到什么
?????路由组件：接收到三个固定的属性
??????????history:
???????????????????? go: ? go(n)
????????????????????goBack: ? goBack()
????????????????????goForward: ? goForward()
???????????????????? push: ? push(path, state)
????????????????????replace: ? replace(path, state)
??????????location:
????????????????????pathname: "/about"
????????????????????search: ""
????????????????????state: undefined
??????????match:
???????????????????? params: {}
???????????????????? path: "/about"
????????????????????url: "/about"