模糊匹配与严格匹配

richest_qi

已于 2022-05-19 16:02:53 修改

阅读量796

点赞数

分类专栏： React17/18 文章标签： react路由模糊匹配严格匹配 exact

于 2022-05-19 15:04:18 首次发布

本文链接：https://blog.youkuaiyun.com/qzw752890913/article/details/124861255

版权

React17/18 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了React Router的基本使用，并通过示例详细讲解了模糊匹配和严格匹配的区别。在模糊匹配中，路径/home能匹配到/home/news和/home/message，而在添加exact属性实现严格匹配后，只有路径/home能被正确匹配，/home/news和/home/message将无法匹配到相应组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本路由的使用

在这里插入图片描述

本篇的vue项目，代码涉及的主要文件有：

模板文件index.html
入口文件index.js
入口组件App.js
路由组件Home：pages/Home/index.jsx
路由组件About：pages/About/index.jsx

模板文件index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

入口组件App.js

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

pages/Home/index.jsx（Home组件）

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
        <h2>我是Home的内容</h2>
    )
  }
}

pages/About/index.jsx（About组件）

import React, { Component } from 'react'

export default class About extends Component {
  render() {
    return (
        <h2>我是About的内容</h2>
    )
  }
}

模糊匹配与严格匹配

根据以上路由的基础实例，来研究下模糊匹配、严格匹配。

模糊匹配

对App.js进行修改，新增两个路由链接，分别为：

<NavLink to="/home/news">News</NavLink>
<NavLink to="/home/message">Message</NavLink>

修改后的App.js，如下。

import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home/news">News</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home/message">Message</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Home}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

在这里插入图片描述
可以看到，

点击导航Home时，访问了 http://localhost:3000/home，展示了路由组件Home的内容。
<NavLink to="/home"/>、<Route path="/home" component={Home}/>，即链接路径 /home 匹配了路由路径 /home 。
点击导航News时，访问了 http://localhost:3000/home/news，也展示了路由组件Home的内容。
<NavLink to="/home/news>、<Route path="/home" component={Home}/>，即链接路径: /home/news 匹配了路由路径 /home。
点击导航Message时，访问了 http://localhost:3000/home/message，也展示了路由组件Home的内容。
<NavLink to="/home/message"/>、<Route path="/home" component={Home}/>，即链接路径: /home/message 匹配了路由路径 /home 。

<Route path="/home" component={Home}></Route> 就是模糊匹配，因此，

链接路径 /home 匹配了路由路径 /home 。
链接路径: /home/news 匹配了路由路径 /home。
链接路径: /home/message 匹配了路由路径 /home 。

严格匹配

对App.js进行修改，对路由路径/home，要求严格匹配，即

<Route exact path="/home" component={Home}/>，注意 exact 。
或者这样写： <Route exact={true} path="/home" component={Home}/>， exact={true} 。

修改后的App.js，如下。


import React, { Component } from 'react'
import {NavLink,Route} from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <NavLink className="list-group-item" activeClassName='active' to="/about">About</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home">Home</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home/news">News</NavLink>
              <NavLink className="list-group-item" activeClassName='active' to="/home/message">Message</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Route path="/about" component={About}></Route>
                <Route exact path="/home" component={Home}></Route>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}