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}/>