React-router

React 优势

​ 1、React 速度很快：它并不直接对 DOM 进行操作，引入了一个叫做虚拟 DOM 的概念，安插在 javascript 逻辑和实际的 DOM 之间，性能好。

​ 2、跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。

​ 3、一切都是 component：代码更加模块化，重用代码更容易，可维护性高。

​ 4、单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。

​ 5、同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。

​ 6、兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

hash路由:hash模式背后的原理是`onhashchange`事件，可以在`window`对象上监听这个事件：
 
		window.onhashchange = function(event) {
		    console.log(event.oldURL, event.newURL);
		    let hash = loaction.hash  //通过location对象来获取hash地址
		    console.log(hash)    // "#/notebooks/260827/list"  从#号开始
		}
因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用,这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫**前端路由**，成为了单页应用标配。 

history路由:随着history api的到来，前端路由开始进化了，前面的**hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由**

　　	history api可以分为两大部分：切换和修改
​		（1）切换历史状态
			包括括` back、forward`、`go`三个方法，对应浏览器的前进，后退，跳转操作 
				history.go(-2);//后退两次
				history.go(2);//前进两次
				history.back(); //后退
				hsitory.forward(); //前进
		（2）修改历史状态
​			包括 了`pushState、replaceState`两个方法，这两个方法接收三个参数：stateObj，title，url 

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题。
但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，
会分分钟刷出一个404来。

react中的编程式导航方法有哪些？

this.props.history.push("需要跳转的路径")；

this.props.history.back()

this.props.history.forward()

this.props.history.replace()

前台404界面

打包应用运行

1). 解决生产环境ajax跨域问题
    使用nginx的反向代理解决(一般由后台配置)
    CORS: 允许浏览器端跨域
2). BrowserRouter模式刷新404的问题
    a. 问题: 刷新某个路由路径时, 会出现404的错误
    b. 原因: 项目根路径后的path路径会被当作后台路由路径, 去请求对应的后台路由, 但没有
    c. 解决: 使用自定义中间件去读取返回index页面展现

react-router4的核心思想是什么？
路由也变成组件了，所以它是非常灵活的(NavLink Route)。 vue中的路由需要单独的配置 vue-router

react路由常用的一些组件配置项有哪些？

	BrowserRouter
	HashRouter      
	withRouterRoute
	Link
	NavLink
	Switch
	Redirect

• react-router的两种模式是什么？区别是什么？

hashHistory # 不需要后端服务器的配置
browserHistory / 需要后端服务器的配置 （后端人员不清楚路由重定向等相关的概念）

reatc路由中Route渲染组件的方法有哪几种？区别是什么？

渲染方式有2种

通过component进行组件的渲染，这种方式的优点在于可以直接在组件的内部接受到history、location、match,缺点在于如果需要组件传参，或者渲染jsx语法的时候无法使用

{ return }}> 通过render进行渲染组件，优点在于可以进行组件传参，还可以渲染非组件的标签，缺点在于如果需要使用 histroy location match的话需要在函数中传递过去

如何控制路由的路径完全匹配

• 给NavLink 或者 Route设置 exact属性

react中路由传递参数的方法有哪些？

1、动态路由传参数
2、query传值

谈谈你对react中withRouter的理解

默认情况下必须是经过路由匹配渲染的组件在this.props上拥有路由参数，才能使用编程式导航的写法，withRouter是把不是通过路由切换过来的组件，将react-router 的 history、location、match 三个对象传入props对象上
简单的来说就是不是路由包裹的组件也可以使用路由的一些方法

引入路由

	下载包: react-router-dom
	
拆分应用路由:
	  Login: 登陆
	  Admin: 后台管理界面
注册路由:
	  <BrowserRouter>
	  <Switch>
	  <Route path='' component={}/>

Product整体路由
	1). 配置子路由: 
	    ProductHome / ProductDetail / ProductAddUpdate
	    <Route> / <Switch> / <Redirect>
	
	2). 匹配路由的逻辑:
	    默认: 逐层匹配   <Route path='/product' component={ProductHome}/>
	    exact属性: 完全匹配