模糊匹配与严格匹配

文章目录

  • 基本路由的使用
    • 模板文件index.html
    • 入口文件index.js
    • 入口组件App.js
    • pages/Home/index.jsx(Home组件)
    • pages/About/index.jsx(About组件)
  • 模糊匹配与严格匹配
    • 模糊匹配
    • 严格匹配

基本路由的使用

模糊匹配与严格匹配_第1张图片

本篇的vue项目,代码涉及的主要文件有:

  1. 模板文件index.html
  2. 入口文件index.js
  3. 入口组件App.js
  4. 路由组件Home:pages/Home/index.jsx
  5. 路由组件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 Apptitle>
  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进行修改,新增两个路由链接,分别为:

  1. News
  2. Message

修改后的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>
    )
  }
}

模糊匹配与严格匹配_第2张图片
可以看到,

  1. 点击导航Home时,访问了 http://localhost:3000/home,展示了路由组件Home的内容。
    ,即 链接路径 /home 匹配了 路由路径 /home
  2. 点击导航News时,访问了 http://localhost:3000/home/news,也展示了路由组件Home的内容。
    ,即 链接路径: /home/news 匹配了 路由路径 /home
  3. 点击导航Message时,访问了 http://localhost:3000/home/message,也展示了路由组件Home的内容。
    ,即 链接路径: /home/message 匹配了 路由路径 /home

就是模糊匹配,因此,

  1. 链接路径 /home 匹配了 路由路径 /home
  2. 链接路径: /home/news 匹配了 路由路径 /home
  3. 链接路径: /home/message 匹配了 路由路径 /home

严格匹配

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

  • ,注意 exact
  • 或者这样写: 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>
    )
  }
}

模糊匹配与严格匹配_第3张图片
可以看到,

  1. 点击导航home时,访问了 http://localhost:3000/home,展示了路由组件Home的内容。
  2. 点击导航News时,访问了 http://localhost:3000/home/news,没有展示任何内容。
  3. 点击导航Message时,访问了 http://localhost:3000/home/message,也没有展示任何内容。

就是严格匹配(或者精确匹配),因此,

  1. 链接路径 /home 只匹配了 路由路径 /home
  2. 链接路径: /home/news 不会匹配 路由路径 /home
  3. 链接路径: /home/message 不会匹配 路由路径 /home

你可能感兴趣的:(react16,react路由,模糊匹配,严格匹配,exact)