使用 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 } 的情况下,路由的子集也是符合匹配要求的;