React学习day8

React路由

推荐文章：https://blog.csdn.net/qq_30523685/article/details/85989476
SPA

• 单页面Web应用
• 整个应用只有一个完整的页面
• 点击页面中的链接不会刷新页面，只会做页面的局部更新
• 数据都需要通过ajax请求获取，并在前端异步展现

什么是路由

• 一个路由就是一个映射关系
• key为路径，value可能是function或component

路由分类

后端路由：

• value是function，用来处理客户端提交的请求。
• 注册路由：router.get(path,function(req,res)
• 工作过程：当node 接收到一个请求时，根据请求路径找到匹配的
• 路由，调用路由中的函数来处理请求，返回响应数据。

前端路由：

• 浏览器端路由，value是component，用于展示页面内容
• 注册路由：
• 工作过程：当浏览器的path变为/test时，当前路由组件就会变为Test组件

react-router

• react的一个插件库
• 专门用来实现一个SPA应用
• 基于react的项目基本都会用到此库

推荐连接：印记中文https://docschina.org/

在react项目控制台安装react-router库：

yarn add react-router-dom

当你安装报错：error An unexpected error occurred: “https://registry.npm.taobao.orgnpm/element-ui: getaddrinfo ENOTFOUND registry.npm.taobao.orgnpm registry.npm.taobao.orgnpm:443”.
可以参考以下博客：
https://blog.csdn.net/i_am_a_div/article/details/107935408

安装成功显示如下：

路由的基本使用：

• 明确好界面中的导航区、展示区
• 导航区的a标签改为Link标签 Demo
• 展示区写Route标签进行路径的匹配<Route path='/xxx' component={Demo}/>
• <App>的最外侧包裹了一个<BrowserRouter>或<hashRouter>

案例：
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import  {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import './App.css';
import {Link,BrowserRouter,Route} from 'react-router-dom'
//创建外壳组件
import React,{Component} from 'react'
import About from './components/About'
import Home from './components/Home'
//创建并暴露App组件
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">React Router Demo</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="./homw.html">Home</a>*/}
                   {/*  在React中靠路由链接实现切换组件*/}

                       {/* eslint-disable-next-line react/jsx-no-undef */}
                       <div >
                       <Link className="list-group-item" to="/about">About</Link>
                       </div>
                       <div>
                       {/* eslint-disable-next-line react/jsx-no-undef */}
                       <Link className="list-group-item" to="/home">Home</Link>
                       </div>

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

Home/index.js

import React, {Component} from 'react';

class home extends Component {
    render() {
        return (
            <div>
                <h1>我是home</h1>
            </div>
        );
    }
}

export home Index;

About/index.js

import React, {Component} from 'react';

class about extends Component {
    render() {
        return (
            <div>
                <h1>我是about</h1>
            </div>
        );
    }
}

export default about;

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

1、收到的props不同：

• 路由组件可以收到路由器传递的三个主要信息：history、location、match
• 一般组件：写组件标签时传递了什么，就能收到什么

2、写法不同：

• 一般组件：
• 路由主机：<Route path="/demo" component={Demo}/}

3、存放位置不同：

• 一般组件：componets
• 路由主机:pages