react4.X的路由问题

• Switch
  为了解决route的唯一渲染，它是为了保证路由只渲染一个路径。
  是唯一的，因为它仅仅只会渲染一个路径，当它匹配完一个路径后，就会停止渲染了。相比之下（不使用 包裹的情况下），每一个被location匹配到的将都会被渲染

<HashRouter>
                        <Switch>
							<Route  path="/" component={Login} />
                            <Route  path="/admin" component={Admin} />
                        </Switch>
</HashRouter>

这样不管如何匹配，都只会匹配到/（不会匹配到/admin）
要想解决这个问题，，可加exact匹配（exact并不是随随便便加的，每个都加也会出现问题）

<HashRouter>
                        <Switch>
							<Route  exact path="/" component={Login} />
                            <Route  path="/admin" component={Admin} />
                        </Switch>
</HashRouter>

exact是Route的一个属性，认为其是一种严格匹配模式

当exact为false时，根据路由匹配所有组件，如"/" 匹配 “/”、“/home”、“/home/menu”；

当exact为true时，则“/” 仅匹配“/”、无法匹配到“/home”。

实际应用中设置该属性，取决于页面的构造。

若一个路由对应一个独立的页面(非嵌套)，则可使用exact：true，这样能够保证在路由为“/home”时不会匹配到“/”对应组件。

若一个路由对应是页面中局部view时，则exact设为false，否则因“/home/menu” 无法匹配“/home”，导致父组件无法渲染更别提嵌套的局部view。

• React-Router4.X路由的嵌套以及实例
  React-Router4.x中 路由配置思想和之前的不太一样，2.x、3.x原路由配置为集中思想，即在一个js中嵌套加嵌套，但是在4.x中采用分散思想，即路由的配置放在每一个组件中，嵌套的子组件配置写在父组件所在的js文件中。
• 在实现实现了组件的嵌套，在这里的写法呢需要注意两点：
  1、match：match作为react-router中的对象,通过this.propos使用，网上存在const加参数match写法，与这里不同。
  2、父子组件：子组件路由路径必须在父组件之下，即父组件为/about，那么子组件需要为/about/xxx