react-router 使用总结

一.关于browserHistory
下面是我在项目当中使用的BrowserRouter实现的单页应用，各个页面之间跳转不会刷新页面。

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'

function MyRouter () {
  return (
    <Router basename='/help'>
      <Suspense fallback={<JsLoading />}>
        <TopBar />
        <Switch>
          <Route exact path='/' component={HelpHome} />
          <Route
            path='/list' component={() => {
              return (
                <div>
                  <SideMenu />
                  <Switch>
                    <Route exact path='/list/:id' component={HelpList} />
                    <Route path='/list/search/:keyword' component={SerachContent} />
                  </Switch>
                </div>
              )
            }}
          />
          <Route component={NotFound} />
        </Switch>
      </Suspense>
    </Router>
  )
}

1.Router 和（BrowserRouter 和 HashRouter）的区别
HashRouter和BrowserRouter是对Router的封装，传入Router的history对象不同

import { Route, Router, Switch } from 'react-router-dom'
import history from '$/src/history'

function MyRouter () {
  return (
    <Router history={history}>
    ...
    )
}

import { createBrowserHistory } from "history";

const history = createBrowserHistory({ basename: "/help" });

export default history;

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'

function MyRouter () {
  return (
    <Router basename='/help'>
    )
}

以上两种写法达到的效果是一样的。

2.history对象

react router 是建立在history的基础上的，它能监听浏览器地址栏的变化，并将这个url转换为location对象，然后router根据location对象进行路由匹配，最后正确的渲染对应的组件。
常用的history有三种形式：

• browserHistory
• hashHistory
• createMemoryHistory
  browserHistory 是推荐使用的router，它使用浏览器自带的history API用于处理url，创建一个真实的URL。

3.服务端配置
服务器需要做好处理 URL 的准备。处理应用启动最初的 / 这样的请求应该没问题，但当用户来回跳转并在 /accounts/123 刷新时，服务器就会收到来自 /accounts/123 的请求，这时你需要处理这个 URL 并在响应中包含 JavaScript 应用代码。

1）开发环境中对于服务器的配置：webpack-dev-server
我们在开发环境中使用的服务器是webpack-dev-server，那webpack-dev-server是怎么处理这些跳转链接的呢？

config.historyApiFallback = {
rewrites: [
{ from: /^//, to: ‘/help’ }
]
}
当服务器找不到页面时，会自动跳转到首页。

2）生产环境中服务器配置nginx
my.conf文件：

location / {
            add_header Cache-Control no-cache;
            if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
                 add_header Cache-Control max-age=7776000;
            }
            try_files $uri $uri/ /index.html;
        }

生产环境中，在服务器上找不到其他文件时，可以让nginx服务器提供静态服务并指向index.html文件。

4.withRouter 的作用

1.react-router会自动将location、match和history三个对象通过props传入route所在的组件内部。
2.如果不是route组件，可以用withRouter包裹该组件，withRouter会将react-router的location、match和history三个对象通过props传入被withRouter包裹的组件。
3.withRouter的原理就是将该组件用一个route包一层。

2.关于获取链接中的/：id 参数
match对象的使用：match对象表示匹配到的路由参数，只有上述程序中的HelpList可以获取到链接中的id参数，通过props.match.params.id

3.链接跳转
1）window.location.href = url
表示在现有网址的基础上打开一个链接
通过location对象的属性对链接进行改变之后，浏览器都会刷新页面，并生成一条浏览记录。
2）window.open(url)
表示在一个新的窗口打开该链接
3）props.history.push({ pathname: /list/search/${val} })
在不刷新页面的情况下实现路由跳转
4）<Link to='/list' />
元素点击的形式实现不刷新跳转

5.hashRouter和browserRouter的区别
1）HashRouter

上述图片中，# 之前的路由是后端路由，之后的路由是前端路由。
如何区分前端和后端路由？
后端路由是指我们访问的资源真的存在于http://localhost.jd.com:10100/下的help文件夹下面。当访问一个链接时，会去某个域名下找这个文件夹，找不到的话，会返回404。

那链接后面的前端路由是如何返回对应的内容的呢？
router中的history对象实现的。它会分析地址栏的链接，生成对应的location，router会根据location的不同，去匹配不同的路由，进而渲染不同的组件。

注：关于帮助中心部署在主站的help文件夹下，两个网站之间互相跳转为什么不能用Link?
Link的跳转使用的是history.location.push()方法，是在当前单页应用的前端路由中进行跳转，而我们跳转的是后端路由，要用刷新页面来实现链接跳转，用链接访问的时候，首先会在服务器端找相应的位置是否有相应的资源，这个时候就找到了help文件夹，可以正常显示帮助中心首页。