React路由的模糊匹配与严格匹配

原创

堕落飞鸟

发布于 2023-05-20 19:21:16

1.8K0

发布于 2023-05-20 19:21:16

文章被收录于专栏：飞鸟的专栏飞鸟的专栏

模糊匹配

模糊匹配是React Router的默认匹配方式。在模糊匹配中，路由会根据URL的路径部分进行匹配。当URL的路径部分与路由的路径部分部分匹配时，就会触发匹配。

下面是一个模糊匹配的示例代码：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};

export default App;

在上面的示例中，我们定义了两个路由：Home和About。在Route组件中，我们使用path属性指定路由的路径。exact属性用于指定该路由是否需要进行精确匹配，默认为模糊匹配。

例如，当URL为/时，会触发对应的Home路由组件，因为它与path="/" 模糊匹配。同样，当URL为/about时，会触发About路由组件，因为它与path="/about"模糊匹配。

严格匹配

严格匹配要求URL的路径必须与路由的路径完全匹配。只有当URL的路径与路由的路径完全相同时，才会触发匹配。

下面是一个严格匹配的示例代码：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/about" strict component={About} />
    </Router>
  );
};

export default App;

在上面的示例中，我们给About路由添加了strict属性。这意味着只有当URL的路径与path="/about"完全匹配时，才会触发About路由组件。

例如，当URL为/about时，会触发About路由组件，因为它与path="/about"完全匹配。但是，当URL为/about/或/about/extra时，不会触发About路由组件，因为它们与path="/about"不完全匹配。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

react

登录后参与评论

0 条评论

热度