体验React + Router，用于不同模块分流

原先的performance dashboard上线后，接入的产品单一，只有一个，我们暂且叫它A。所以打开首页默认进入到了A的performance dashboard里面。随着业务的发展以及平台功能的日趋完善，终于迎来了第二个上车的产品线B。
那么问题来了，产品B的人进入系统你给人家看A的东西，不合适吧？A不同意，B也不乐意。路由功能呼之欲出。
React有一个成熟的组件Router，可以用于应用之间跳转。如下，我定义了几个页面跳转。用于访问对应的路径，页面就会渲染出对应的component。

 <Router>
        <Switch>
          <Route exact={true} path='/' component={DefaultPage} />
          <Route path={moduleUrl} component={Dashboard} />
          <Route path='/config' component={OpsMan} />
          <Route path='/monitor' component={OpsMonitor}/>
          <Route path='/*' component={NotFound} />
        </Switch>
      </Router>

我们既然是用模块来区分，那么这个模块路径肯定是动态的。然后后续页面根据url上面的模块名再去加载对应的值。首先在路径上声明变量moduleName。

const moduleUrl= "/module/:moduleName"

然后在首页中采用<Link>组件来定义选择的模块，如：<Link to="/module/A">；<Link to="/module/B">
当用户点击A link的时候，Router组件捕捉到对应的path，然后转接到Route进行处理，会替换对应的moduleName，进而进入到Dashboard页面。
当然Route还可以嵌套使用。

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <Route path="/A" component={A}/>
    <Route path="/B" component={B}/>
  </Route>
</Router>

当用户访问/A,会先加载App，然后再加载A组件。
Route中的path路径也可以使用通配符。

（1）:paramName

:paramName 匹配URL的一个部分，直到遇到下一个/、?、#为止。这个路径参数可以通过this.props.params.paramName取出。

（2）()

()表示URL的这个部分是可选的。

（3）*

*匹配任意字符，直到模式里面的下一个字符为止。匹配方式是非贪婪模式。

（4） **

** 匹配任意字符，直到下一个/、?、#为止。匹配方式是贪婪模式。