# day_02_router

**Repository Path**: wang-jiqing/day_02_router

## Basic Information

- **Project Name**: day_02_router
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## react路由：react-router、react-router-dom
react-router：路由核心

react-router-dom：dom相关，负责页面跳转

安装命令：

npm install react-router
npm install react-router-dom
## 路由的两种模式：

​ hash模式：路径后面会有一个#，使用hash链表来实现

​ history模式：路径是正常的，使用html5 historyAPI实现

​ 两种不同模式的路由不能混合使用

## 路由的原理：

​ 根据路径的不同，切换不同的路由对象 ，实现页面跳转

react没有router对象，需要手动创建路由管理组件:

//在src中新建Router.js
import React from "react";
import {
    HashRouter,//路由模式
    Switch,    //排他路由
    Route,      //当前路由对象
    
} from "react-router-dom";

import List from "./AM/list";
import Detail from "./AM/detail"

//管理路由对象
class Router extends React.Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route path="/detail" component={Detail}></Route>
                    <Route path="/list" component={List}></Route>
                </Switch>
            </HashRouter>
        )
    }
}

export default Router
跳转传值：

//方式一：
//this.props.history.push({
	pathname:"路由",
    state:{要传递给路由的值}
})
//接受时:
this.props.locaton.state.属性名

//弊端：传输的数据会在页面刷新后不会保存
//解决方式：把接受到的数据放在sessionStorage中

//方式二：
//动态路由+Link
<Route path="/about:msg" component={About}/>
    
<Link to="/about/拼接要传输给目标路由的数据" ></Link>
 //接受：
this.props.match.params.属性名

  
## 路由嵌套：

​ react的路由嵌套需要将二级路由组件写在所对应的一级路由组件中，在Router.js中只引入一级路由组件，在App.js中只需要引入路由管理组件Router.js。（嵌套路由只能使用Link跳转）

数据类型判断
四种方式：

//typeof() 
console.log( typeof(a) );//返回表示数据类型的字符串
//instanceof操作符
console.log( a  instanceof  number ); //  返回true或false
//constructor   
console.log( a.__proto__.constructor == Student.prototype.constructor );
//Object.prototype.toString.call()  
console.log.( Object.prototype.toString.call(a) );
每种方式都有缺陷：

​ topeof()：只能判断基本数据类型，判断引用数据类型只能返回Object；

​ instanceof 和 constructor ：不能很好的解决内置数据类型的判断，instanceof对null和underfined不起作用，constructor对array无法很好的判断

​ Object.prototype.toString.call()主要用于判断内置数据类型

​ 如果想要完美的判断数据类型需要多种方式配合使用