react（42）——Route路由的模糊匹配与严格匹配

1. 模糊匹配

<HashRouter>
  <NavLink activeClassName="acc" to="/a">
    a
  </NavLink>
  <NavLink activeClassName="acc" to="/b/c/d">
    b
  </NavLink>
  <Switch>
    <Route path="/a" component={Page1} />
    <Route path="/b" component={Page2} />
  </Switch>
</HashRouter>

1. Link的to属性指向多级路径，Route的组件的path属性相匹配其中的一级路径，就可以路由成功，如上述代码的第二个Route组件。
   

2.严格匹配

<HashRouter>
          <NavLink activeClassName="acc" to="/a">
            a
          </NavLink>
          <NavLink activeClassName="acc" to="/b/c/d">
            b
          </NavLink>

          <Switch>
            <Route exact={true} path="/a" component={Page1} />
            <Route exact={true} path="/b" component={Page2} />
          </Switch>
        </HashRouter>

2. 给Route组件的exact属性设置为true，那么path属性必须与Link的to属性完全一致，才能路由成功，上述代码中的第二个Route组件就不能匹配成功。
   
3. <Route exact={true} path="/a" component={Page1} />可以简写成
   <Route exact path="/a" component={Page1} />

3.注意

1. Route的exact属性一般不使用，因为有时候会导致无法继续匹配二级路径。