React学习14（路由的基本使用）

相关理解

1）对SPA的理解

        单页Web应用；

        整个应用只有一个完整的页面；

        点击页面中的链接不会刷新页面，只会做页面的局部刷新；

        数据都需要通过ajax请求获取，并在前端异步展示

2）路由的理解

A、什么是路由

        一个路由就是一个映射关系（key-value）;

         key为路径，value可能是function或者是component

B、路由分类

后端路由

        理解：value是function，用来提交客户端提交的请求

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

        工作过程：当Node接收到一个请求时，根据请求的路径找到匹配的路由，调用路由中的 函数

来请求路由，返回响应数据

前端路由

        浏览器端路由：value是component，用来展示页面内容

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

3）react-router的理解

注意：由于react-router有版本的更新，目前最新的版本是6，以下关于路由器的说明都是基于5的

版本，最新的版本后期会做继续的说明

react-router是react的一个插件库（所以在使用路由的时候需要安装：npm i react-router-

dom@5.2.0，因为是采用的分别暴露，所以在使用的过程中，用什么引入什么）；

专门用来实现一个SPA应用;

基于react的项目基本都会用到此库

路由的基本使用

1.明确好页面的导航区，展示区

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

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

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

<Route path="/xxx" component={Demo} />

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

代码示例

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>Vue 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 active" href="./about.html">About</a>
              <a className="list-group-item" 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>
    )
  }
}

About.jsx

import React, { Component } from 'react'

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

Home.jsx

import React, { Component } from 'react'

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

index.js

import React from 'react'

import ReactDOM from 'react-dom'

import { BrowserRouter } from 'react-router-dom'

import App from './App.jsx'



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

路由组件与一般组件的区别

1.写法不同：

        一般组件：<Demo/>

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

2.存放位置不同

        一般组件：components中

        路由组件：pages中

3.接收到的props不同

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

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

三个固定的属性分别为：

history:
 go: f go(n)
 goBack: f goBack(n)
 goForward: f goForward(n)
 push: f push(path, state)
 replace: f replace(path, state)

location:
 pathname:"/about"
 search:''
 state:undefined

match:
 params:{ }
 path:'/about'
 url:'/about'