React-router4详解 看完你就懂了

React-router4详解 看完你就懂了

React-router4(RR4)

组成部分：

react-router 核心

react-router-dom(基于浏览器环境的开发)

react-router-native（基于react-native环境的开发）

• 安装 react-router-dom 或 react-router-native 时，都会自动将 react-router 作为依赖安装

常用组件：

路由类型组件：（历史路由和哈希路由）

<Browserouter/>
类似于vue中的history路由,利用了pushState和replaceState来构建路由。pushState和replaceState是HTML5新接口，可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。

• 问题：在React + React-router实现的SPA(单页面应用)项目中，当我们路由模式采用browserHistory时，点击每个导航都可以显示正确的页面，一旦浏览器刷新，页面就显示Cannot GET（404）。
• 分析：当刷新页面时，浏览器会向服务器请求example.com/list，服务器实际会去找根目录下list.html这个文件，发现找不到，因为实际上我们的服务器并没有这样的物理路径/文件或没有配置处理这个路由，所有内容都是通过React-Router去渲染React组件，自然会报404错误。这种情况我们可以通过配置Nginx或通过自建Node服务器来解决。
• 解决：需要服务器支持（服务器配置）
• 原理：其本质的原理就是利用服务端将任何请求都指向index.html，而在React应用中index.html又刚好通过React-Router配置了相应的路由，我们让服务器返回index.html，后面就交给前端路由来实现无刷新加载对应页面。

import  {BrowserRouter,Route,Switch} from 'react-router-dom'
<BrowserRouter>
<Switch>
	<Route path='/xxx' component={xxxx}>
 </Switch>
</BrowserRouter>

<HashRouter/>
类似于vue中的hash路由，使用window.location.hash和hashchange事件构建路由。

hash即URL中"#"字符后面的部分。

• 使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；
• hash还有另一个特点，它的改变不会导致页面重新加载；
• hash值浏览器是不会随请求发送到服务器端的；
• 通过window.location.hash属性获取和设置hash值。

hashchange事件（IE8已支持该事件）

• 当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）
• hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性。

import  {HashRouter,Route,Switch} from 'react-router-dom'
<HashRouter>
<Switch>
	<Route path='/xxx' component={xxxx}>
</Switch>
</HashRouter>

路由渲染组件：

<Route/>

是 React Router 中最重要的组件