react入门之旅7——Route之匹配规则&Switch&Redirect

匹配规则

<NavLink to="/home">Home</NavLink>
<Route path="/home" component={Home}/>

创建链接时，to属性给的是"/home"；路由的path属性给的同样也是"/home"，是一模一样的，这明显是采用的精准匹配。但react-router-dom采用的匹配规则并不是精准匹配，而是模糊匹配，但该模糊匹配并非简单看to字符串是否包含path中的字符串。

首先，得明确一点，to和path中给的并非简单的字符串，而是路径。切换路径是通过/（斜杠）来识别的，上面这个简单示例只有一层目录，但实际情况可能不止一层目录。但即使不止一层，path也可以采用精准的匹配方式，直接和to中保持一致即可。不过这样可能会带来一个问题，就是很多路由，有些路由需要匹配刚刚写的目录上一层级，这样就会匹配错误。

<NavLink to="/home">Home</NavLink>
<NavLink to="/home/l2">Home_L2</NavLink>
<Route path="/home" component={Home}/>
<Route path="/home/l2" component={Home_L2}/>

先说结论，点击Home_L2的时候，Home组件和Home_L2组件都会展示。

react-router-dom匹配规则是这样的：

1. Route注册路由带有的path，如果to中包含path中的路径，则会加载
2. to中的顺序必须和path中的顺序保持一致

exact

<NavLink to="/home">Home</NavLink>
<NavLink to="/home/l2">Home_L2</NavLink>
<Route exact path="/home" component={Home}/>
<Route path="/home/l2" component={Home_L2}/>

Route自带exact属性，是精准匹配，加了就采用精准匹配模式。

总结两句：

虽然还没学到多级路由这个知识点，但其实我们都有这个概念，毕竟不管啥应用不可能只有一层路由。所以匹配的规则咱需要理解，不过可以简单理解为都是精准匹配，至少我们在写代码的时候，to是啥，path就是啥，并且他俩都别写成多层路径，没必要玩套路，最后坑的还不是自己。知道有exact这个属性，万一写的应用出现问题时，可以加上这个属性试试能不能解决就行。

Switch

其中，这个知识点，也可以简单理解，就是创建的路由，外面需要包裹上Switch这个组件

<Switch> 
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
</Switch>

该组件的作用是，让每一次路由不进行遍历，找到了就加载，提高性能避免错误加载。不过还是那句，简单理解，固定加上即可。

Redirect

顾名思义，重定向。就是url没有加上路径的时候，让其重定向指定的路由。

<Switch>
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Redirect to="/home"/>
</Switch>

在浏览器中输入url，默认加上Redirect组件配置的路径。作为测试人员，这个应该很好理解。