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

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

一.基本使用:

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

  2)导航区的a标签改为Link标签
<Link to="/xxxxx">Demo</Link>
  3)展示区写Route标签进行路径的匹配
<Route path='/xxxx' component={Demo}/>
  4)<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

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

举例子：

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

export default class App extends Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 原生html中，靠<a>跳转不同的页面 */}
                            {/* <a className="list-group-item" href="./about.html">About</a>
                            <a className="list-group-item active" href="./home.html">Home</a> */}
                            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
                            <Link className="list-group-item" to="/about">About</Link>
                            <Link className="list-group-item" to="/home">Home</Link>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 注册路由 */}
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

注意必须要包裹 BrowserRouter 或者 HashRouter

可以在index.js中进行操作

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
)

二.NavLink:

区别于Link：
<NavLink></NavLink> 进行导航栏的跳转 会默认添加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 (
			<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
		)
	}
}

使用：

import MyNavLink from './components/MyNavLink'

<MyNavLink to="/about">About</MyNavLink>

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

四.Switch组件

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

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

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

{/* 注册路由 */}
<Switch>
	<Route path="/about" component={About}/>
	<Route path="/home" component={Home}/>
	<Route path="/home" component={Test}/>
</Switch>

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

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

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

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

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

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

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

七.路由的重定向：

redirect:

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

    <Switch>
         <Route path="/about" component={About}/>
         <Route path="/home" component={Home}/>
         <Redirect to="/about"/>
     </Switch>

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

路由组件：一般放在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"