react-tips2: route 的exact参数的设置问题

 

使用 react-router-dom 中的 <Route> 组件，这个组件有个参数  exact ,

下面举个例子,

<Route  path="/" component={Home} />
<Route  path="/introduce" component={Introduce} />
<Route  path="/detail" component={Detail} />

上面的三个路由，如果我们先输入的网址是根目录，那么会显示 Home 这个组件，因为匹配到了 path =" / ";

                             如果我们先输入的网址是 /introduce 那么会显示 Home 和 Introduce 这两个组件；

                             因为路由的匹配的时候不是严格按照 /introduce匹配的，所以导致这个问题；

                              <Route> 组件的参数 exact 的作用就是严格匹配路由；

 

 上面的代码其实和下面这样写是一样的：

默认情况下没有参数exact 的效果等同于 exact = {false}

注意：  是 exact = { false } , 而不是 exact = "false"

<Route  exact={false} path="/" component={Home} />
<Route  exact={false} path="/introduce" component={Introduce} />
<Route  exact={false} path="/detail" component={Detail} />

 我们要解决上面的问题，设置 exact = { true } 即可，如下：

<Route  exact={true} path="/" component={Home} />
<Route  path="/introduce" component={Introduce} />
<Route  path="/detail" component={Detail} />

当设置 根目录的路由为严格的匹配时，我们访问 /introduce 的的时候或者 /detail 的时候，

就不会再显示根目录显示的页面了；

 

出现上面的问题的原因是，路由在匹配的时候，比如我们现在访问 /introduce ，  / 根目录是 /introduce 的子集；

所以导致匹配成功，也就是说，没有设置严格匹配，也就是 exact = { true } 的情况下，路由的子集也是符合匹配要求的；