react-router-dom中的BrowserRouter和HashRouter

react-router-dom中的BrowserRouter和HashRouter - 尚码园HashRouter包裹下访问根服务：假设为 localhost:3000/html 1 import { HashRouter as Router, Route, Redirect } from 'https://www.shangmayuan.com/a/af68203cea59416a9a5cd04e.html

HashRouter包裹下访问根服务：假设为 localhost:3000/html

 1 import { HashRouter as Router, Route, Redirect } from 'react-router-dom';  
 2 // as的做用为将HashRouter重命名为Router,这样的好处是在反复测试HashRouter和BrowserRouter时,能够免去组件修改
 3 
 4 import Home from './pages/Home/index';
 5 import Hooks from './pages/Hooks/index';
 6 
 7 export default function App() {
 8   return (
 9     <Router>
10       <Route path="/">
11         <Redirect to="/home" />
12       </Route>
13       <Route path="/home" component={Home} />
14       <Route path="/hooks" component={Hooks} />
15     </Router>
16   )
17 }

操做一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/#/home,可正常访问.前端

操做二: 浏览器直接输入localhost:3000/#/hooks
结果: 可正常访问node

将HashRouter更改成BrowserRouterreact

1 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';  // 使用BrowserRouter

操做一: 浏览器直接输入localhost:3000/
结果: 路由自动变为localhost:3000/home,可正常访问nginx

操做二: 浏览器直接输入localhost:3000/hooks
结果: 浏览器没法得到正确的结果,Cannot GET /hooks浏览器

操做二: 浏览器直接输入localhost:3000/home
结果: 浏览器没法得到正确的结果,Cannot GET /home服务器

操做三: 浏览器直接输入localhost:3000/成功后,点击内容<Link to="home">Home</Link>
结果: 可成功跳转react-router

那么问题来了：为何HashRouter能够直接访问路径,而BrowserRouter会出现找不到路由的状况？为何HashRouter在前端跳转就能成功?dom

服务器路由: browserRouter, 前端路由: hashRouter

browserRouter

若是前端使用了browserRouter,每次改变路由时，会向服务器发送请求，由于服务器未配置对应的路径指向对应的文件，天然致使出现404的状况.(对于初始化页面,即路由为/时,不会发送请求)测试

所以在使用browserHistory须要再加一层服务器配置(node/nginx),让前端发送的请求映射到对应的html文件上.

hashRouter

因为hashRouter会在路径上添加/#/，而/#/后面的全部都不会发送到服务器端，即对于服务器而言，路径依旧是localhost:3000，路由切换在前端完成。

可是官方会更推荐使用browserRouter，貌似是由于其构建于H5的History API，比起hashRouter，它多出了更多的方法操控url