react之react-router

1.什么是react-router

react-router是第三方為react開發單頁應用開發出來的一個庫，只有學習了react-router之后，我們就可以使用react開發spa應用了，源碼地址：

https://github.com/ReactTraining/react-router 官網地址：https://reacttraining.com/react-router/

2.什么是spa應用

spa的全稱是signal page application 單頁應用，就是所有的功能都是在一個頁面進行完成的，這個主要是和傳統的pc端網頁比較形成的（就是a標簽跳轉），主要是單頁的用戶體驗，類似native app（原生的app 就是手機里面的那些app，一般都存在底部導航欄，在做切換的時候，頁面上很多內容會被復用。）的體驗。

spa 的底層原理：1.錨點（hash）window.onhashchange 2.h5(history) 3.ajax 可以（不能來回跳轉，沒有歷史記錄）4.iframe 框架集（不友好）

3.react-router的使用

3.1 創建react 應用

使用命令 npx create-react-app demo-app 來創建，然后通過命令進入 cd demo-app

使用命令安裝react-router核心庫 npm install react-router-dom 

然后使用npm start啟動項目

3.2 路由基本使用

1）按需導入以下組件

 

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

 

BrowserRouter as Router 為前面的組件取一個別名，主要的原因是react-router 提供了兩個路由的容器：（1）BroswerRouter（2）HashRouter 稱之為：路由的容器，所有的路由操作都必須定義在該組件下面。

Route 翻譯過來是路線的意思，需要該組件定義好路徑和顯示組件的對應關系

Link 底層就是a鏈接，實現聲明式的跳轉

在項目根目錄下創建一個components目錄在其下面創建三個文件夾分別為Home，News，Profile，在每個文件夾下面分別再建一個index.js文件，內容如下

import React, { Component } from 'react'

class Home extends Component{
    render(){
        return <div>
            <h2>Home組件</h2>
        </div>
    }
}

export default Home

然后在App.js里面將每個組件進行引入

import Home from './components/Home'
import News from './components/News'
import Profile from './components/Profile' 

最后在App.js里面編寫路由跳轉

class App extends Component {
  render(){
    return <Router>
      <div>
        <h1>react路由</h1>
        <Link to="/home">首頁</Link>
        <Link to="/news">新聞</Link>
        <Link to="/profile">個人</Link>
        {/**定義映射關系 */}
        <Route path="/home" component={Home} />
        <Route path="/news" component={News} />
        <Route path="/profile" component={Profile} />
      </div>
    </Router>
  }
}

children的使用

        <Route path='/about' children={()=>{
          return <div>
            <h2>children組件</h2>
          </div>
        }}/>

特性：（1）無論我的URL地址里面hash是否和hash進行怎么樣的匹配，對於children里面的組件都會被渲染出來（2）children函數式組件可以接受一個參數props，如果path和URL地址的hash匹配上，則props里面的match屬性就是一個對象，對象里面包含了地址相關的信息，如果匹配不上，值為null，但是組件還是渲染。

render的使用

        <Route path='/renders' render={()=>{
          return <div>
            <h2>render函數式組件的渲染</h2>
          </div>
        }} />

特性：render屬性值是一個函數式組件，當前URL地址的和path匹配的時候，就會加載該函數式組件，可傳一個參數props，它包含以下幾個屬性（1）history主要是做函數導航，（2）location代表的url地址信息（3）match代表路由傳參，例：/news/14

3.3 嵌套路由

這里以上述案例的新聞為例，這是index.js頁面

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from './Detail'
class News extends Component {
    render() {
        return <div>
            <h2>News組件</h2>
            <hr />
            <ul>
                <li><Link to='/news/detail/1/13'>新聞一</Link></li>
                <li><Link to='/news/detail/2/34'>新聞二</Link></li>
                <li><Link to='/news/detail/3/43'>新聞三</Link></li>
                <li><Link to='/news/detail/4/24'>新聞四</Link></li>
            </ul>
            <hr/>
            <h3>新聞的詳情-ID-</h3>
            <Route path="/news/detail/:news_id/:type" component={Detail}/>
        </div>
    }
}
export default News

下面是detail.js頁面，用來獲取詳細路由傳值，這里用到了內置屬性props

import React from 'react'

export default class Detail extends React.Component{
    render(){
        return <div>
            <h2>新聞的詳情展示</h2>
            <p>ID:{this.props.match.params.news_id}-{this.props.match.params.type}</p>
        </div>
    }
}

3.4 編程式導航

定義一個按鈕進行跳轉

<button onClick={()=>this.clickHandler()}>點擊回到首頁</button>

clickHandler=()=>{
        //參數1，代表要跳轉的路徑,參數2，代表跳轉的時候，可以攜帶路由參數(不是必須的)
        this.props.history.push('/home',{info:'從'+this.props.location.pathname+'從這里過來的'})
    }

3.5 NotFound組件

 

當我們輸入路徑找不到對應路由的時候，我們可以定義一個notfound頁面，頁面內容自定義即可

在app.js 引入並使用notfound

 

import NotFound from './components/NotFound'

<Route component={NotFound}/>