React路由

路由

路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
实现spa应用：

1. 整个项目只有一个完整页面
2. 页面切换不会刷新页面，内容局部更新

1. 路由-分类

1. React-Router
   提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。
2. React-Router-DOM
   提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM。

2. HashRouter 和 BrowserRouter

1. HashRouter
   url中会有个#，例如localhost:3000/#，HashRouter就会出现这种情况，它是通过hash值来对路由进行控制。如果你使用HashRouter，你的路由就会默认有这个#。
2. BrowserRouter
   很多情况下我们则不是这种情况，我们不需要这个#，因为它看起来很怪，这时我们就需要用到BrowserRouter。

3. link与switch

1. Link
   主要API是to，to可以接受string或者一个object，来控制url。
2. NavLink
   它可以为当前选中的路由设置类名、样式以及回调函数等
   to属性跳转路径activeClassName当元素处于活动状态时应用于元素的样式

路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。

4. 使用

1. 下载路由模块

npm install --save react-router-dom

2. 在App.js引用路由模块

import { BrowserRouter, Route,Link} from 'react-router-dom';

• BrowserRouter ：保证 UI 界面和 URL 保持同步
• Route：职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
• Link：路由调转导航

import React, { Component } from 'react'
import "./Home.css"
//1.引用路由模块中必要的功能
/* 
BrowserRouter:路由模式（保持ui得界面与url保持一致）
Router:设置路由规则
Link ：设置跳转链接
*/
import { BrowserRouter,Route,Link,NavLink } from 'react-router-dom'
//2.创建路由相关的页面（引用到页面中）
import A from './pages/a'
import B from './pages/b'
import C from './pages/c'
export default class Home extends Component {
    render() {
        return (
            <div>
               {/* 4.创建路由规则,需要把所有的内容写在路由模式中 */}
                <BrowserRouter>
                    <div>
                        <a href="/a">aaaaa</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="/b">bbbbb</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="/c">ccccc</a><br/>
                        <h1>使用link的方式跳转路由</h1>
                        <Link to="/a">linka</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Link to="/b">linkb</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <Link to="/c">linkc</Link><br/>
                        <h1>使用Navlink</h1>
                        {/* 使用navlink来进行路由的跳转，
                            默认情况下选中的路由会自动的设置一个active的类名
                            如果不想使用这个类名怎么办
                        */}
                        <NavLink to="/a">navlinka</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <NavLink to="/b">navlinkb</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <NavLink to="/c">navlinkc</NavLink><br/>
                        <h1>修改NavLink选中的active类名</h1>
                        <NavLink to="/a" activeClassName="hehe">navlinka</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <NavLink to="/b" activeClassName="hehe">navlinkb</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <NavLink to="/c" activeClassName="hehe">navlinkc</NavLink><br/>
                        {/* 定义路由规则 path component */}
                        <Route path="/a" component={A}/>
                        <Route path="/b" component={B}/>
                        <Route path="/c" component={C}/>
                    </div>
                </BrowserRouter>
            </div>
        )
    }
}

3. NavLink

• 导入NavLink

import { BrowserRouter,Route,Link,NavLink } from 'react-router-dom'

• 设置选中Class方便样式设置

<h1>修改NavLink选中的active类名</h1>
<NavLink to="/a" activeClassName="hehe">navlinka</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<NavLink to="/b" activeClassName="hehe">navlinkb</NavLink>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<NavLink to="/c" activeClassName="hehe">navlinkc</NavLink><br/>

5. 重定向

1. 导入Redirect

import { BrowserRouter,Route,Link,NavLink,Redirect } from 'react-router-dom'

2. 定义重定向路劲

{/* 设置重定向 注意，现在上面的引用里面添加Redirect的引用 */}
<Redirect to="/a"/>

6. js跳转

1. push方法在路由页面中跳转 this.props.history.push("/xxxx")

7. 二级路由

1. 在子页面中引用路由模块

import { BrowserRouter, Route,Link} from 'react-router-dom';

2. 设置相关规则
   c.js

import React, { Component } from 'react'
import { BrowserRouter,Route,Link} from 'react-router-dom'
import Era from './era'
import Erb from './erb'
import Erc from './erc'
export default class c extends Component {
    render() {
        return (
            <div>
                ccc
                <Link to="/c/era">点我去二级路由a</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Link to="/c/erb">点我去二级路由b</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <Link to="/c/erc">点我去二级路由c</Link><br/>
                <Route path="/c/era" component={Era}/>
                <Route path="/c/erb" component={Erb}/>
                <Route path="/c/erc" component={Erc}/>
            </div>
        )
    }
}

era.js

import React, { Component } from 'react'

export default class era extends Component {
    render() {
        return (
            <div>
                era
            </div>
        )
    }
}

8. 传参

8.1 传参params方式

在 Router标签后面拼接传递参数的名字

<Route path="/b/:xiaoming" component={B}/>

设置发送的数据

<NavLink to="/b/你好么么哒" activeClassName="hehe">navlinkb</NavLink>

在需要接受的路由组建中接受this.props.match.params.name
优缺点：

• 优势 ： 刷新地址栏，参数依然存在
• 缺点 ： 只能传字符串，并且，如果传的值太多的话，url会变得长而丑陋。

8.2 传参query

在Link中设置发送的数据

<NavLink to={{pathname:"/a",query:{xiaohong:"我是query传递的参数"}}} activeClassName="hehe">navlinka</NavLink>

在需要接受的路由组建中接受

console.log(this.props.location.query.xiaohong);

优缺点：

• 优势：传参优雅，传递参数可传对象；
• 缺点：刷新地址栏，参数丢失

8.2 传参state

在Link中设置发送的数据

<NavLink to={{pathname:"/a",state:{xiaohong:"我是state传递的参数"}}} activeClassName="hehe">navlinka</NavLink>

在需要接受的路由组建中接受

console.log(this.props.location. state.name)

优缺点：

• 优势：传参优雅，传递参数可传对象；
• 缺点：刷新地址栏，参数丢失