1.第一部分是路由的出口 这里一定要用BrowserRouter包裹住
import { Redirect, Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom';
<Content>
<BrowserRouter>
<Switch>
<Route path='/studentMain/studentMain/recruit' component={Recruit}></Route>
<Route path='/studentMain/studentMain/toCompany' component={ToCompany}></Route>
<Route path='/studentMain/studentMain/recProgress' component={RecProgress}></Route>
<Route path='/studentMain/studentMain/resume' component={Resume}></Route>
<Redirect to='/studentMain/studentMain' />
</Switch>
</BrowserRouter>
</Content>
2.第二部分是路由的入口 一定要用Router包裹 这个Router其实也是BrowserRouter
import { Link, BrowserRouter as Router } from 'react-router-dom';
return (
<Router>
<Menu>
{this.list}
</Menu>
</Router>
);
注意:
使用BrowserRouter时,那么这个时候服务端拿到的是完整的 URL
,这时候服务端就必须分别对 /home 和 /about 做处理并返回相应的 HTML 来给到客户端渲染。这个带来的影响就是,如果你切换到某个服务端没有做相应处理的页面路由,如果你在 SPA 中写了这部分路由要渲染的页面,在页面无刷新情况下跳转是没啥问题的。但是如果你直接在此路由下进行页面的刷新,就会得到一个 404。
但是使用HashRouter,HashRouter 在 URL 中使用哈希符号(#)来使服务端忽略 # 后面所有的 URL 内容。服务端拿到的只会是http://example.com/
,这样服务端只需要对这个路由做处理并返回 HTML,然后后面的路由 /home 或 /about 将全部交给客户端(也就是我们的 SPA 应用)来处理并渲染对应的页面。所以你在任意的路由进行页面的刷新都不会是 404。