Route组件的exact属性与NavLink组件的exact属性有什么区别？

React Router 中exact属性的作用 #

Route组件的exact #

Route组件的exact属性意为只有路径完全匹配时才会将对应组件渲染到页面上，不会渲染路径前缀匹配的更长相似路径的组件。示例代码如下：

<Switch>
  <Route path="/" exact>
    <Users />
  </Route>
  <Route path="/:userId/places" exact>
    <UserPlaces />
  </Route>
  <Route path="/places/new" exact>
    <NewPlace />
  </Route>
  <Route path="/places/:placeId">
    <UpdatePlace />
  </Route>
  <Redirect to="/" />
</Switch>

如果上述代码中path="/"的Route没有加exact，那么所有以/开头的路径（比如/places/new、/auth等）都会匹配到这个路由，导致所有页面都会渲染Users组件，加了exact后只有访问根路径才会触发该路由的组件渲染。

NavLink组件的exact #

NavLink是React Router提供的导航专用组件，核心特性是当前页面路径和to属性的路径匹配时，会自动给链接元素添加active类名，方便开发者自定义当前激活导航的样式（比如高亮、下划线等）。
这里的exact属性作用是强制只有路径完全匹配时，才给当前NavLink添加激活类。示例代码如下：

<ul className="nav-links">
  <li>
    <NavLink to="/" exact>
      ALL USERS
    </NavLink>
  </li>       
  <li>
    <NavLink to="/places/new">ADD PLACE</NavLink>
  </li>
  <li>
    <NavLink to="/auth">AUTHENTICATE</NavLink>
  </li>     
</ul>

以上示例中如果to="/"的NavLink没有加exact，那么所有以/开头的路径都会和这个导航匹配，导致无论你切到「ADD PLACE」还是「AUTHENTICATE」页面，「ALL USERS」的导航都会一直处于激活高亮状态，加了exact后只有真的访问根路径时，这个导航才会被标记为激活状态。

内容的提问来源于stack exchange，提问作者Milán Nikolics