React---路由的使用(一)

一、SPA的理解

1. 单页Web应用（single page web application，SPA）。
2. 整个应用只有一个完整的页面。
3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
4. 数据都需要通过ajax请求获取, 并在前端异步展现。

二、路由的理解

1. 什么是路由?
   1. 一个路由就是一个映射关系(key:value)
   2. key为路径, value可能是function或component
2. 路由分类
   1. 后端路由：

　　　　　　　　1) 理解： value是function, 用来处理客户端提交的请求。

　　　　　　　　2) 注册路由： router.get(path, function(req, res))

　　　　　　　　3) 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

　　　　　　2. 前端路由：

　　　　　　　　1) 浏览器端路由，value是component，用于展示页面内容。

　　　　　　　　2) 注册路由: <Route path="/test" component={Test}>

　　　　　　　　3) 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

二、react-router-dom的理解

1. react的一个插件库。
2. 专门用来实现一个SPA应用。
3. 基于react的项目基本都会用到此库。
4. 安装路由：npm install --save react-router-dom

三、react-router-dom相关API

1. 内置组件

1. <BrowserRouter>
2. <HashRouter>
3. <Route>
4. <Redirect>
5. <Link>
6. <NavLink>
7. <Switch>
8. history对象
9. match对象
10. withRouter函数

2. 其它

1. history对象
2. match对象
3. withRouter函数

3.路由的基本使用

            1.明确好界面中的导航区、展示区

            2.导航区的a标签改为Link标签

                        <Link to="/xxxxx">Demo</Link>

            3.展示区写Route标签进行路径的匹配

                        <Route path='/xxxx' component={Demo}/>

            4.<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

四、路由组件与一般组件

            1.写法不同：

                        一般组件：<Demo/>

                        路由组件：<Route path="/demo" component={Demo}/>

            2.存放位置不同：

                        一般组件：components

                        路由组件：pages

            3.接收到的props不同：

                        一般组件：写组件标签时传递了什么，就能收到什么

                        路由组件：接收到三个固定的属性

                                            history:

                                                        go: ƒ go(n)

                                                        goBack: ƒ goBack()

                                                        goForward: ƒ goForward()

                                                        push: ƒ push(path, state)

                                                        replace: ƒ replace(path, state)

                                            location:

                                                        pathname: "/about"

                                                        search: ""

                                                        state: undefined

                                            match:

                                                        params: {}

                                                        path: "/about"

                                                        url: "/about"

五、代码

1.App.jsx

import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">

                            {/* 原生html中，靠<a>跳转不同的页面 */}
                            {/* <a className="list-group-item" href="./about.html">About</a>
                            <a className="list-group-item active" href="./home.html">Home</a> */}

                            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
                            <Link className="list-group-item" to="/about">About</Link>
                            <Link className="list-group-item" to="/home">Home</Link>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 注册路由 */}
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

2.index.js

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
)

3.Home.jsx

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <h3>我是Home的内容</h3>
        )
    }
}

4.About.jsx

import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
            <h3>我是About的内容</h3>
        )
    }
}