react技术全家桶（42）switch的使用

switch使用
如果path有重复的，该如何解析。

<Link className="" to="/about">About</Link>
//注册路由
<Router path="/about" component={About}></Router>   path与to相同
<Router path="/home" component={Home}></Router>   path与to相同
<Router path="/home" component={Test}></Router>   path与to相同

如果这种情况 react会怎么展示呢？

很明显都展示了
如果点击home 会匹配所有/home的 也就是说会把所有的路由都扫描一遍 这样效率低 如果找到第一个/home就停止呢？
需要叫上Switch

加上Switch：

path与to相同
path与to相同
path与to相同


谁先匹配的 展示谁 如图将会展示test组件的内容

switch总结：

注意：

当在所有的path前面加上前缀/ati
访问http:/localhost:3000 返回的是public下的index.html是正常的
但是当点击一个路由的时候 浏览器的路径会变成 http:/localhost:3000/ati/home 页面正常显示
当刷新页面的时候样式丢了。 样式使用的是bootstrap
原因：使用的第三方的bootStrap。
请求路径是相对的 所以当刷新的时候,请求路径是：http:/localhost:3000/ati/css/bootstrap.css
路径不对，但是控制台network返回的是200 是因为 react当请求的路径找不到的时候返回的是public下的index
http:/localhost:3000 代表的就是pulic目录
刚开始不点击路由的时候为啥是正常的，因为刚开始访问的是http:/localhost:3000路径 已经把bootstrap.css加载了，
后次点击路由的时候已经存在了，所以样式正常。再次刷新的时候请求地址变了，所以样式丢了

解决方案：
1.改为绝对地址： 去掉.
2.改为
3.将BowerRouter 改为 HashRouter 因为HashRouter带有# ，#后面的字符串都不会发送的服务器上。