在看 React 示例时,发现在配置路由时很多都用到了 exact 属性,然后就研究了一下。
在 React Router 中,exact 是一个布尔属性,用于确保路由路径的精确匹配。
示例
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';const App = () => {return (<Router><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /></Switch></Router>);
};export default App;
上述示例中,在第一条路由中用到了 exact,表示精准匹配,如果不写的话,那么在匹配路由 “/about” 时,会匹配到路由 “/”,这样就会造成组件匹配错误。
尝试
然后我就在我的 React 项目中试了一下,没有出现上述的问题,添加或删掉 exact 对我的项目没有任何影响,查阅了一些资料才发现是 React Router 版本的问题:
在 React Router 版本 5 及之前的版本中,需要关注这个属性,因为它的默认行为为 false,如果没有显示的设置为 true,路由将会进行模糊匹配,即只要路径部分匹配,就会渲染对应的组件。但是在 React Route 版本 6 中,exact 属性已被移除,路由的默认行为改为了精准匹配,只有在当路径与 URL 完全匹配时才会渲染组件。
总结
如果版本在 v6,就不需要关注 exact 属性啦。