React路由簡單介紹

1.1、基本用法

單頁面得特點：只需要加載一次主頁面，通過局部刷新，就可以實現跳轉或者切換頁面

優點：加載速度快，用戶體驗比較好

缺點：

- 第一次加載比傳統要慢一點
- 不利seo
- 頁面相對復雜
- 返回鍵

1.2安裝react-router-dom

cnpm install react-router-dom　　

下載到生產環境的依賴中。

在組件中通過對象的解構方式去獲取到`react-router-dom`內置組件，在組件中，按需引入內置組件，在頁面中進行使用：

- HashRouter表示一個路由的根容器，將來所有的路由相關的東西，都要包裹在HashRouter里面，而且一個網站中，只需要使用一次HashRouter就好了；
- Route表示一個路由規則，在Route上，有兩個比較重要的屬性，path，component
- Link表示一個路由的鏈接

代碼示例

render(){
        return (
            <HashRouter>
                <div>
                    <h1>這是網站的根目錄</h1>
                    <hr />
                    <Link to="/home">首頁</Link>  
                    <Link to="/movie/">電影</Link>  
                    <Link to="/about">關於</Link>
                    <hr />
                    <Route path="/home" component={Home} ></Route><hr/>
                    <Route path="/movie" component={Movie} exact></Route><hr/>
                    <Route path="/about" component={About}></Route><hr/>
                </div>
            </HashRouter>
        );
    }

當使用HashRouter把APP根組件的元素包裹起來之后，網站就已經啟用路由了，在一個HashRouter中，只能有唯一的一個根元素。 在一個網站中，只需要使用唯一的一次`<HashRouter></HashRouter>`就行了。

Route創建的標簽，就是路由規則，其中path表示要匹配的路由，component表示要展示的組件。Route具有兩種身份：1.它是一個路由匹配規則；2.它是一個占位符，表示將來匹配到的組件都放到這個位置

需要注意的地方

- Route 組件path地址是以/開頭 ，配置component屬性，是顯示的組件，這個屬性不可以大寫
- Route組件可以單雙標簽使用，單標簽需要/結尾，雙標簽不可以在中間寫入別的東西
- Link to屬性的地址也是/開頭，Link在頁面渲染的是a標簽

2.1、路由傳值

通過配置路由的地址，在Link跳轉時

- Route path路徑后面 /:id （key）
- Link to 路徑后面 /top/10 （value）

接收傳值：

- class類組件，this.props.match.params.屬性名
- 函數組件：形參.match.params.屬性名

代碼示例

render(){
        return (
            <HashRouter>
                <div>
                    <h1>這是網站的根目錄</h1>
                    <hr />
                    <Link to="/movie/top/10">電影</Link>  
                    <hr />
                    <Route path="/movie/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }

在Route內置組件中，配置path地址：

<Route path="/movie/:type/:id" component={Movie} exact></Route>

在Link內置組件中，配置to屬性，進行跳轉：

<Link to="/movie/top/10">電影</Link>

類組件中通過生命周期進行接收，this.props攜帶路由傳遞過來的數據：

render(){
        console.log(this);
        return (
            <div>
                電影--{this.props.match.params.type}--{this.props.match.params.id}
            </div>
        );
    }

代碼優化后：　

class Movie extends React.Component{

    constructor(props){
        super();
        this.state = {
            routeParams:props.match.params
        }
    }

    render(){
        console.log(this);
        return (
            <div>
                電影--{this.state.routeParams.type}--{this.state.routeParams.id}
            </div>
        );
    }
}

函數組件中通過形參接收傳遞過來的值，props形參，函數組件作為路由組件，props就是傳遞過來的對象，里面攜帶着路由傳遞過來的數據　

import React from 'react'

export default function home(props) {
	return (
		<div>
			{props.match.params.id}
		</div>
	)
}

2.2、嵌套路由　

嵌套路由：在路由組件中，使用Link， Route，配置子路由，實現跳轉，切換；

下面為一級路由，在一級路由Home為路由組件

<Route path="/home" component={ Home }></Route>

在Home組件中繼續使用Link，Route進行路由的嵌套，需要注意的就是路由地址，前部分為一級路由地址，后面接一個二級路由相應的路徑　

render() {
    return (
        <div>
            <ul>
            	<li><Link to="/home/a">推薦</Link></li>
            	<li><Link to="/home/b">新時代</Link></li>
                <li><Link to="/home/c">動漫</Link></li>
            </ul>
            <Route path="/home/a" component={ A }></Route>
            <Route path="/home/b" component={ B }></Route>
            <Route path="/home/c" component={ C }></Route>
        </div>
    )
}

2.3、JS實現路由跳轉　

引入BrowserRouter模塊

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

使用BrowserRouter作為根容器　

jump(){
    window.location.href = "/news"
}

render(){
    return (
        <BrowserRouter>
            <div>
                <h1>這是網站的根目錄</h1>
                <hr />
                <button onClick={()=>{this.jump()}}>新聞</button>
                <hr />
                <Route path="/news" component={News}></Route>
            </div>
        </BrowserRouter>
    );
}

在render方法中，寫一個按鈕，按鈕名稱為js跳轉路由，定義一個onClick方法，箭頭函數解決this指向問題，與render同級，定義一個jump方法，在jump方法中執行一句代碼進行路由跳轉，使用window.location.href = “路由的地址”實現路由跳轉。　

3、react-router-dom內置組件

首先按需引入，使用什么內置組件，就需要引入

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

3.1、在組件中使用NavLink　

NavLink 帶有選中activeClassName ,如果路由處於激活狀態，顯示激活class樣式。

在我們之前案例的基礎上，找到Link組件，我們已經學到Link組件的作用，可以進行路由的跳轉，通過to屬性，跳轉相應的path地址。

```html//
<ul>
    <li>
    	<Link to="/home">首頁</Link>
    </li>
    <li>
    	<Link to="/video">好看視頻</Link>
    </li>
</ul>

　將組件中的Link全部換成NavLink組件

``html//
<li>
	<NavLink activeClassName="red" to="/home">首頁</NavLink>
</li>
<li>
	<NavLink activeClassName="red" to="/video">好看視頻</NavLink>
</li>
```

　　

我們會發現，之前可以正常進行路由跳轉，換成NavLink，還依然可以正常跳轉，證明組件得跳轉使用NavLink也可以實現，那么問題來了，NavLink有什么用，為什么封裝了NavLink，將每一個NavLink加入一個activeClassName屬性綁定一個class類樣式，這時在觸發NavLink時，會觸發相應得樣式，這樣有一個切換效果。

3.2、在組件中使用Redirect內置組件

Redirect 重定向 具備to屬性，可以直接跳轉到指定路由。

在render方法中，使用內置組件，Redirect內置組件使用to屬性，當執行到內置標簽是，會進行to跳轉路由，to后面接的地址是什么，就可以匹配到相應得路由組件。

```html//
<Redirect to="/home/c"></Redirect>

3.3、在組件使用Switch內置組件　

Switch 具有排他性

在組件中使用Switch標簽包裹所有得Route，這時，Route相當於每一個path都是精准的匹配，展示相應的組件，最后一個Route是一個不具備地址的路由路徑，如果當Link指向一個不存在的地址時，沒有精准的匹配到地址，那么會顯示到C404路由，使用Switch只會顯示一個組件，匹配到為止。

``html//
<Switch>
    <Route path="/home" component={ Home }></Route>
    <Route path="/video" component={ Home1 }></Route>
    <Route path="/book" component={ Home2 }></Route>
    <Route path="/renwu" component={ Home3 }></Route>
    <Route path="/user" component={ Home4 }></Route>
    <Route component={ C404 }></Route>
</Switch>
```