react路由(Router、Link和Route)

Facebook對react進行持續(xù)的改進，路由作為其中最重要的一部分，在4.0版本對其進行了大量的優(yōu)化，總的來說，簡單易用！之前使用react路由的時候，我們引入的是react-router包?，F(xiàn)在改版之后，我們引入的包是react-router-dom包。

改版之后的react-router-dom路由，我們要理解三個概念，Router、Route和Link。

1、RouterRouter

我們可以把它看做是react路由的一個路由外層盒子，它里面的內(nèi)容就是我們單頁面應(yīng)用的路由以及路由組件。

使用方式：

import { BrowserRouter as Router } from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                //otherCoding
            </div>
        </Router>
        )
    }
}

2、LinkLink

是react路由中的點擊切換到哪一個組件的鏈接，（這里之所以不說是頁面，而是說組件，因為切換到另一個界面只是展示效果，react的本質(zhì)還是一個單頁面應(yīng)用-single page application）。

基本使用方式：

import { BrowserRouter as Router, Link} from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                <ul>
                    <li><link to='/'>首頁</Link></li>
                    <li><link to='/other'>其他頁</Link></li>
                </ul>
            </div>
        </Router>
        )
    }
}

特別說明：

第一、Router下面只能包含一個盒子標(biāo)簽，類似這里的div。

第二、Link代表一個鏈接，在html界面中會解析成a標(biāo)簽。作為一個鏈接，必須有一個to屬性，代表鏈接地址。這個鏈接地址是一個相對路徑。

第三、Route，是下面要說的組件，有一個path屬性和一個組件屬性（可以是component、render等等）。

3、RouteRoute

代表了你的路由界面，path代表路徑，component代表路徑所對應(yīng)的界面。

使用方式：

import React,{ Component } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class Home extends Component{
    render(){
        return (
            <div>this a Home page</div>
        )
    }
}
class Other extends Component{
    render(){
        return (
            <div>this a Other page</div>
        )
    }
}
class Main extends Component{
    render(){
        return (
            <Router>
                <div>
                    <ul>
                        <li><Link to="/home">首頁</Link></li>
                        <li><Link to="/other">其他頁</Link></li>
                    </ul>
                    <Route path="/home" component={Home}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}
render(<Main />,document.getElementById("root"));

react路由基礎(chǔ)、使用與執(zhí)行

接下來我們將會介紹React路由的基本使用方法，以及什么是默認(rèn)路由，路由是怎么實現(xiàn)跳轉(zhuǎn)的，他們是如何進行匹配的。

1、React路由基礎(chǔ)

現(xiàn)代前端應(yīng)用大都是SPA，那么什么是SPA呢？

SPA就是單頁應(yīng)用程序，他的優(yōu)點是用戶體驗好、服務(wù)器壓力小，但是我們要把很多內(nèi)容放在一個頁面上，為了有效使用單個頁面管理原來多頁面的功能，前端路由應(yīng)運而生。

前端路由實現(xiàn)功能：從一個頁面到另一個頁面

映射規(guī)則：URL路徑和組件對應(yīng)功能（配置路徑和組件配對）

2、路由的基本使用

1）安裝react-router-dom

2）導(dǎo)入路由核心組件（當(dāng)然我們要按需導(dǎo)入）

• BrowserRouter as Router(Router就是BrowserRouter的別名)
• Route
• Link

3）使用React組件包裹整個應(yīng)用(重要)

4）使用Link組件作為導(dǎo)航菜單(路由入口)，會被編譯成a標(biāo)簽

<Link to="/first">頁面1</Link>

5）使用Route組件配置路由規(guī)則和要展示的組件(路由出口)

<Route path="/first(和路由入口匹配)" component={要展示的組件的名}></Route>

但是我們的內(nèi)容展示在哪呢？Route寫在哪就把內(nèi)容渲染在哪

3、路由執(zhí)行過程

1）點擊Link組件，修改瀏覽器地址欄URL

2）React路由監(jiān)聽到地址欄變化

3）React路由遍歷所有Route組件，使用路由規(guī)則path與pathname匹配

4）當(dāng)匹配成功就展示Route組件內(nèi)容

編程式導(dǎo)航：通過JS代碼實現(xiàn)頁面的跳轉(zhuǎn)

4、默認(rèn)路由

進入頁面就會展示的路由，進入頁面就會被匹配到展示 。

<Route path='/'>

5、路由匹配模式

1）模糊匹配模式

a）”/“所有pathname都可以被匹配

b）只要pathname是以path開頭的都會匹配成功

c）pathname指得是Link組件中to屬性的值

d）path指的是Route組件中path屬性的值

2）精確匹配

a）給Route組件添加exact屬性，讓其變成精確匹配

b）只有pathname和name完全相同才會被展示

心得：React路由的一切都是組件、我們可以像思考組件一樣去思考路由

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論