React研习之旅（二）：视图控制器-路由

静态路由需要开发者考虑两层：

• 页面的开发或组件和组合
• URL路径与组件关系的设置

静态路由提前声明，简单易懂，Vue-router就是静态路由的例子。

动态路由

动态路由相反，将上述两层关注合为一体： 页面设计开发过程直接确立了URL与组件的关系 ，开发的样子，决定了路由的样子，符合了 动态 的理念。开发者无需额外管理与配置路径。省心省力。

react-router v4采用了动态路由( react有一个静态路由包在内测中 )，之前版本则是静态路由,。 需要注意的是，react-router v4里，route也是一种组件的存在形式.

对比一下，感受不同

//static routes
const routes = [
  {
    component: Root,
    routes: [
      {
        path: "/",
        exact: true,
        component: Home
      },
      {
        path: "/child/:id",
        component: Child,
        routes: [
          {
            path: "/child/:id/grand-child",
            component: GrandChild
          }
        ]
      }
    ]
  }
];
//dynamic routes
const App = () => (
  <Router>
    <div>
      <Header />

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/topics" component={Topics} />
    </div>
  </Router>
);
export default App;
复制代码

react-router体系

到react-router的github官网看到这一句：

we actually publish several packages to npm from the same codebase . 同一个代码基项目发布了几个包：

有几个信息：

• react-router为 核心包 ，其他包依赖该包
• 开发 web项目 使用react-router-dom,开发 原生应用 使用react-router-native
• 静态路由 版本react-router-config,目前内测阶段

因此我们只需要关注react-router-dom即可。

react-router-dom的几个核心概念

react-router-dom教程网上很多，在此我们罗列几个比较重要或易错的概念，如果需要详细内容，请至:官方API。

BrowserRouter 与 HashRouter

有两种路由类型： browserRouter、HashRouter

// <BrowserRouter>
http://example.com/about

// <HashRouter>
http://example.com/#/about
复制代码

前者使用 HTML5 History API 来跟踪路由变化。后者使用window.location.hash作为记录跟踪方式 。

前者新颖美观，需要服务端的额外支持，原理就是 拦截前端的路径请求（非功能请求），响应同一个index.html，然后浏览器会根据根据路径渲染相应的视图或页面 。举个express的例子：

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();

//加载静态资源，dist下放build好的文件
app.use(express.static(__dirname + '/dist'))

//非功能请求统一转到index.html
//index.html及其对应的js文件会根据React-Router规则匹配对应route
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'dist', 'index.html'))
})

app.listen(port, function () {
  console.log("server started on port " + port)
})
复制代码

后者简单兼容性好，不需要额外配置服务端。 需要指出的是： rowserRouter或 HashRouter必须位于路由相关组件的最外层 ,此处的相关组件常用的有：Link、Route、Switch、Redirect

路由的导航方式

• 声明式导航: <Link to/> 标签，或 <a href="#"></a> 标签,或 <Redirect to/>
• 编程式导航（history方法调用,需要通过）: push(path)、replace(path)、go(n) 、goBack() 、 goForward()
• withRouter高阶组件， 实现编程导航必须借助withRouter高阶组件 。

视图/组件的配置方式

都是通过 Route组件 这座桥梁实施的，但有多种实施方式render、component、children

• render只能为函数组件，匿名、不匿名皆可.
• children可为函数组件、jsx对象
• component可为函数组件或class组件

不好理解？代码演示对比下

function fnComponent(){
	return <div>我是个具名函数组件</div>
}
class classComponent extends Component{
	render(){
		<div>我是个class组件</div>
	}
}
//render只能为函数组件
<Route path="/render" render={()=>{<div>我是个匿名/行内函数组件</div>}}/>
<Route path="/render" render={fnComponent}/>

//children可以为函数组件、也可是jsx对象
<Route path="/children" children={()=>{<div>我是个匿名/行内函数组件</div>}}/>
<Route path="/children" children={fnComponent}/>
<Route path="/children" children={<div>我是一条jsx语法标签对象</div>}/>

//component只能为函数组件或class组件
<Route path="/children" component={()=>{<div>我是个匿名/行内函数组件</div>}}/>
<Route path="/children" component={fnComponent}/>
<Route path="/children" component={classComponent }/>
复制代码

注意官方有这句提示： if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop . 翻译就是：行内函数（匿名函数）作为component属性传递（prop）时，会在每次渲染时创建一个react元素，这将重新挂载（mount）组件，而不是在既存的基础上更新。

这很好理解，匿名函数飘忽不定，每次render都意味着props的改变。 如果实在用匿名函数，请选择children或render的方式