react路由(Router、Link和Route)

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

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

1、RouterRouter

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

使用方式：

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

2、LinkLink

是react路由中的點(diǎn)擊切換到哪一個(gè)組件的鏈接，（這里之所以不說是頁(yè)面，而是說組件，因?yàn)榍袚Q到另一個(gè)界面只是展示效果，react的本質(zhì)還是一個(gè)單頁(yè)面應(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='/'>首頁(yè)</Link></li>
                    <li><link to='/other'>其他頁(yè)</Link></li>
                </ul>
            </div>
        </Router>
        )
    }
}

特別說明：

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

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

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

3、RouteRoute

代表了你的路由界面，path代表路徑，component代表路徑所對(duì)應(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">首頁(yè)</Link></li>
                        <li><Link to="/other">其他頁(yè)</Link></li>
                    </ul>
                    <Route path="/home" component={Home}/>
                    <Route path="/other" component={Other}/>
                </div>
            </Router>
        )
    }
}
render(<Main />,document.getElementById("root"));

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

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

1、React路由基礎(chǔ)

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

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

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

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

2、路由的基本使用

1）安裝react-router-dom

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

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

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

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

<Link to="/first">頁(yè)面1</Link>

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

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

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

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

1）點(diǎn)擊Link組件，修改瀏覽器地址欄URL

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

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

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

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

4、默認(rèn)路由

進(jìn)入頁(yè)面就會(huì)展示的路由，進(jìn)入頁(yè)面就會(huì)被匹配到展示 。

<Route path='/'>

5、路由匹配模式

1）模糊匹配模式

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

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

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

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

2）精確匹配

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

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

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

總結(jié)

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

最新評(píng)論