react-router可分為三種

• 【web】
  1. BrowserRouter
  2.HashRouter
  BrowserRouter與HashRouter的區(qū)別
  1.底層原理不一樣：
  BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。
  HashRouter使用的是URL的哈希值。
  2.url表現(xiàn)形式不一樣
  BrowserRouter的路徑中沒有＃，例如：localhost:3000/demo/test
  HashRouter的路徑包含＃，例如：localhost:3000/#/demo/test
  3.刷新后對路由state參數(shù)的影響
  （1).BrowserRouter沒有任何影響，因為state保存在history對象中。
  （2).HashRouter刷新后會導致路由state參數(shù)的丟失。
  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(
  <BrowserRouter>
    <AppRouter />
  </BrowserRouter>,
  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 (
            <>
                <ul>
                    <li><Link to='/'>首頁</Link></li>
                    <li><Link to='/about'>關于</Link></li>
                    <Route path='/' exact component={Index}></Route>
                    <Route path='/about' component={About}></Route>
                </ul>
            </>
        )
    }
}
function Index() {
    return (
        <div>
            我是首頁
        </div>
    )
}
function About() {
    return (
        <div>
            我是關于
        </div>
    )
}