react-router-dom 路由基础

什么是路由

根据不同的url地址展示不同的页面或者数据

路由分为前端路由和后端路由

前端路由：

1. 前端路由多用于单页面开发（SPA）

2. 前端路由切换不涉及到服务器，是前端利用hash或者HTML5的historyApi来实现的，一般用于不同内容展示及切换

路由模式

hash：HashRouter（带#号，刷新的时候页面不会丢失）
browser: Browser-Router（没有#号，通过历史记录api进行路由切换，刷新会丢失，本地模式刷新不会丢失）

v5版本 下载 npm install --save react-router-dom

react-router 只提供了一些核心的API
reactr-router-dom 更多的选项

路由使用（Route：类似vue的router-view，根据路由匹配；Link:to=‘去哪里’；NavLink：动态给选中的导航添加’active’的类名；Switch：防止重复渲染,确保唯一渲染;Redirect:重定向）

1.在index.js中全局引入

import {BrowserRouter,HashRouter} from "react-router-dom"

2.路由模式包裹根组件

ReactDom.render(<BrowserRouter><App/></BrowserRouter>,document.getElementById('root'))
// 或者
ReactDom.render(<HashRouter><App/></HashRouter>,document.getElementById('root'))

App.js

Home.js

import React, {Component} from 'react'
export default class Home extends Component {
    render(){
        return (
            <div>
                 home
            </div>
        )
    }
}

User.js

import React, {Component} from 'react'
export default class User extends Component {
    render(){
        return (
            <div>
                 user
            </div>
        )
    }
}

Phone.js

import React, {Component} from 'react'
export default class Phone extends Component {
    render(){
        return (
            <div>
                 phone
            </div>
        )
    }
}