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