React Router 中的 exact 属性

最新推荐文章于 2024-04-28 16:08:58 发布

Baobao小包

最新推荐文章于 2024-04-28 16:08:58 发布

阅读量920

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/forever__fish/article/details/134295793

版权

在看 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 完全匹配时才会渲染组件。