3-1、React-Router基础使用plus

本节将开启React框架高阶学习第一篇

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

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

本文目录

一、React-Router的基础使用plus
二、模块化重构
三、路由特性

1、React-Router的基础使用plus：

我们在 2-5、React-Router的基础使用 中简单的介绍了React-Router的BrowserRouter，Switch，Route 的简单用法，可是我们在最后也是通过在浏览器地址栏上去输入路由达到切换的效果，那我们在真正实际的项目是不是不可能这样去给用户使用，我们会在页面中有个导航条去给用户点击跳转，还有都是写在一个index.js文件里，那么按照我们模块化组件开发的思想是不符合的，那今天就来按照这两点来进行优化下。

• 首先增加一个导航条去给用户点击，首先将我们先前创建的react-rd用vscode编辑器打开，在index.js中添加navItem函数组件：

const Navitem = () => (
    <nav>
        <NavLink to="/">主页</NavLink>
        <NavLink to="/login">登录</NavLink>
        <NavLink to="/signin">注册</NavLink>
        <NavLink to="/logout">退出</NavLink>
    </nav>
)

我们可以看到使用了NavLink，那这个也是react-router-dom命名引用，所以我们也要把它引用进来：

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

好的我们写完这个函数组件后，routes jsx模板中引用它：

const routes = (
    <BrowserRouter>
        <Navitem></Navitem> 
        <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>
)

在vscode中调出命令控制台，输入npm start，可以看到页面：

可以看到我们这边的NavLink，默认为a标签，并且已经实现了一个简单的导航切换组件的功能。那我们还可以在每个NavLink增加属性activeClassName="selected"，就是在点击哪个，哪个高亮。我们在src文件夹下创建sass文件，再在sass文件夹下创建_base.scss文件，并且写入代码.selected { font-size: 20px; color: red; }我们让它在被选中的时候会有这么一个样式，接着我们来看看效果：

可以看到我们选择哪个哪个就高亮显示，但是会发现第一个永远都是选中的状态，那这边就跟之前说的路由的问题是一样的，我们再给它一个精准匹配的属性：<NavLink exact activeClassName="selected" to="/">主页</NavLink>，那么再来看下效果：

好的可以看到，这边已经精确匹配了。

---

2、模块化重构：

以上功能全部写在一个index.js入口文件中，这显然是不符合模块化组件的思想的，接下来我们再次给它重构下，我们在真实的开发过程中就要考虑这点，而不是说整体写完再重构，这显然是不行的。我们这边再多写写。
重构后的文件目录如下：

src
├── components
│   ├── indexPage.js
│   ├── loginPage.js
│   ├── logoutPage.js
│   ├── Navitem.js
│   ├── notfoundPage.js
│   └── signinPage.js
├── routes
│   └── AppRouter.js
├── sass
│   └── _base.scss
├── index.js

index.js代码如下：

import ReactDOM from 'react-dom'
import routes from './routes/AppRouter'
import './sass/_base.scss'

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

---

AppRouter.js代码如下:

import React from 'react'
import Navitem from '../components/Navitem'
import indexPage from '../components/indexPage'
import loginPage from '../components/loginPage'
import signinPage from '../components/signinPage'
import logoutPage from '../components/logoutPage'
import notfoundPage from '../components/notfoundPage'
import {BrowserRouter, Route, Switch} from 'react-router-dom'

const routes = (
    <BrowserRouter>
        <Navitem /> 
        <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>
)

export default routes

---

signinPage.js代码如下：

import React from 'react'

const signinPage = () => (
    <h1>我是注册页面</h1>
)

export default signinPage

---

notfoundPage.js代码如下：

import React from 'react'
import {NavLink} from 'react-router-dom'

const notfoundPage = () => (
    <h1>404 你访问的页面走丢了。。。
        <NavLink to="/">回到主页</NavLink>
    </h1>
)

export default notfoundPage

---

Navitem.js代码如下：

import React from 'react'
import {NavLink} from 'react-router-dom'
const Navitem = () => (
    <nav>
        <NavLink exact activeClassName="selected" to="/">主页</NavLink>
        <NavLink activeClassName="selected" to="/login">登录</NavLink>
        <NavLink activeClassName="selected" to="/signin">注册</NavLink>
        <NavLink activeClassName="selected" to="/logout">退出</NavLink>
    </nav>
)

export default Navitem

---

logoutPage.js代码如下：

import React from 'react'

const logoutPage = () => (
    <h1>我是退出页面</h1>
)

export default logoutPage

---

loginPage.js代码如下：

import React from 'react'

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

export default loginPage

---

indexPage.js代码如下：

import React from 'react'

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

export default indexPage

---

_base.scss代码如下：

.selected {
    font-size: 20px;
    color: red;
}

---

好的我们重构完了，重新来看下运行情况：

好的，没有问题。

---

3、路由特性：

好的接下来我们类看看路由特性，我们在logoutPage.js中将代码写为如下：

import React from 'react'

const logoutPage = (props) => {
    console.log(props)
    return (
        <h1>我是退出页面</h1>
    )
}

export default logoutPage

我们在路由跳转的时候去接收这个props，并且将它打印出来，这边我们没有传入props，但是它这边是路由的特性，我们先看看打印出来的东西：

那这边打印出了一个对象：

• history里面有一些方法。那这些方法就可以进行js跳转的路由。
• location就存着关于我们当前url的一些信息。
• match里面有个非常重要的属性params，就是我们可以接收url后面传递过来的一些参数。

具体的使用会在后面实战应用到，这边简单的先了解下。