2-5、React-Router的基础使用

本节将开启React框架进阶学习第五篇

如果还没有学习 1-1 ~ 1-6 React框架基础的话，建议点我开始React框架基础学习

文章系列（React框架进阶）

2-1、React框架组件化state的使用
2-2、React函数组件、默认props
2-3、React使用props以及state、React生命周期localStorage的使用
2-4、React脚手架的使用，以及组件模块构建。

大家好，我是Counterrr
不忘初心，砥砺前行

本文目录

一、React-Router的基础使用
二、总结本小结内容

1、React-Router的基础使用：

React-Router是React框架的第三方路由，它不像vue-router直接就是vue团队开发，好的简单的来了解下React中的路由。
首先打开命令行终端，cd到桌面，执行代码，npx create-react-app react-rd，然后将文件夹用vscode打开，然后在vscode打开命令行，输入npm install react-router-dom安装React-Router。

安装完成后，在dependencies会有react-router-dom以及版本号。
然后我们删除src文件夹下的初始化项目，并且创建index.js文件，写入如下代码：

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom'

const indexPage = () => (
    <h1>我是主页</h1>
)

const routes = (
    <BrowserRouter>
        <Route path="/" component={indexPage}></Route>
    </BrowserRouter>
)

ReactDOM.render(routes, document.getElementById('root'))

可以看到这里BrowserRouter以及Route是命名暴露，我们创建了函数组件indexPage，直接返回jsx语法，然后定义了routes模板，在这个routes模板里，用到了BrowserRouter以及Route标签，可以看到，我们在Route标签写了属性path，那这个属性就意味着当路由为/这个路径的时候，就去匹配component这个属性绑定的indexPage函数组件，并且在ReactDOM.render( )去渲染这段模板，我们看到页面如下：

我们再多来几个路径，将index.js代码改成如下：

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom'

const indexPage = () => (
    <h1>我是主页</h1>
)
const loginPage = () => (
    <h1>我是登录页面</h1>
)

const routes = (
    <BrowserRouter>           
        <Route path="/" component={indexPage}></Route>
        <Route path="/login" component={loginPage}></Route>
    </BrowserRouter>
)

ReactDOM.render(routes, document.getElementById('root'))

我们又增加了一个登录页面，并且也在路由中配置相对应的属性，接着我们在浏览器中输入这个路径：

可以看到我们的登录页面这个组件也显示出来，但是你会发现这个主页组件也显示出来了，那这是为什么呢？原因在于没有精确匹配，/login包括了/所以两个都显示出来了，那么我们如果想精确匹配只需要在<Route path="/" component={indexPage}></Route>上加上属性exact={true}，再来看下浏览器：

可以看到现在已经是精确匹配了。好的我们再来增加两个函数组件，代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route} from 'react-router-dom'

const indexPage = () => (
    <h1>我是主页</h1>
)
const loginPage = () => (
    <h1>我是登录页面</h1>
)
const signinPage = () => (
    <h1>我是注册页面</h1>
)
const logoutPage = () => (
    <h1>我是退出页面</h1>
)

const routes = (
    <BrowserRouter>
        <Route path="/" exact={true} component={indexPage}></Route>
        <Route path="/login" component={loginPage}></Route>
        <Route path="/signin" component={signinPage}></Route>
        <Route path="/logout" component={logoutPage}></Route>        
    </BrowserRouter>
)

ReactDOM.render(routes, document.getElementById('root'))

接着我们去浏览查看：

可以看到我们路由正常匹配，但是在后面在拼接一些路径，还是也有先前的路由界面，这个也就是精确匹配，跟上面一样，再加上去这个属性就可以解决了。
还记得我们之前都是写死了一个组件，现在可以通过路由进行动态的匹配了。
那如果我们用户随便去输入一个路径，我们没有定义的话，就要给用户一个404 not found 的页面进行提示，那我们再写一个404函数组件：

const notfoundPage = () => (
    <h1>404 你访问的页面走丢了。。。</h1>
)

const routes = (
    <BrowserRouter>
        <Route path="/" exact={true} component={indexPage}></Route>
        <Route path="/login" component={loginPage}></Route>
        <Route path="/signin" component={signinPage}></Route>
        <Route path="/logout" component={logoutPage}></Route>   
        <Route component={notfoundPage}></Route>     
    </BrowserRouter>
)

可以看到，我们404组件是没有去写path这个属性那么就意味着除了之前定义的路径，能匹配到相对应的路径，其它路径都给它返回404，我们运行界面可以发现：

当我们访问不存在的路径时就会显示404，但是我们如果这样访问：

发现两个组件都渲染了，这显然不是我们想要的，所以我们再去switch这个命名引入，import {BrowserRouter, Route, Switch} from 'react-router-dom'，并且修改routes 里的代码:

const routes = (
    <BrowserRouter>
        <Switch>
            <Route path="/" exact={true} component={indexPage}></Route>
            <Route path="/login" exact={true} component={loginPage}></Route>
            <Route path="/signin" exact={true} component={signinPage}></Route>
            <Route path="/logout" exact={true} component={logoutPage}></Route>   
            <Route component={notfoundPage}></Route>  
        </Switch>   
    </BrowserRouter>
)

然后去浏览器查看效果：

---

2、总结本小结内容：

好的简单快速来总结下：

• 本节主要讲了React-Rounter中的3个基本命名Api的使用BrowserRouter，Switch，Route 。
• 首先我们要想有个路由切换的效果功能，需要将Route写在BrowserRouter标签里，并且有属性path代表匹配的路由，component代表匹配的组件，exact接收布尔值，代表是否精确匹配。
• Switch标签又包裹Route 标签，代表着如果前一项匹配成功就不往下走。

好的，React-Router的基础使用暂且先到这。