react_路由的使用

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。