react-router

react-router可分为三种

• 【web】
  1. BrowserRouter
  2.HashRouter
  BrowserRouter与HashRouter的区别
  1.底层原理不一样：
  BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
  HashRouter使用的是URL的哈希值。
  2.url表现形式不一样
  BrowserRouter的路径中没有＃，例如：localhost:3000/demo/test
  HashRouter的路径包含＃，例如：localhost:3000/#/demo/test
  3.刷新后对路由state参数的影响
  （1).BrowserRouter没有任何影响，因为state保存在history对象中。
  （2).HashRouter刷新后会导致路由state参数的丢失。
  4.备注：HashRouter可以用于解决一些路径错误相关的问题。
• NativeRouter 【nactive】
• MemoryRouter 【anywhere】

BrowserRouter

命令行输入

npm i --save react-router-dom

import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import AppRouter from './AppRouter'
const Root = document.getElementById('root')
render(
  
    
  ,
  Root
);

import React from 'react'
import { Route, Link } from 'react-router-dom'

export default class AppRouter extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <>
                

                    
首页
                    
关于
                    
                    
                
            
        )
    }
}
function Index() {
    return (
        

            我是首页
        
    )
}
function About() {
    return (
        

            我是关于
        
    )
}