【react】路由模糊匹配和严格匹配

  v6以下
  1、默认使用的是模糊匹配（简单记：【输入的路径】必须包含要访问的路径，且顺序要一致）
  2、开启严格匹配：<Route exact={true} path="/about" component={About}/>
  3、严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
  v6以上
  1、默认使用的是模糊匹配 <Route path="/about/:subpath?" element={<About/>}/>
  2、开启严格匹配：【输入的路径】与【访问的路径】保持一致

react-router-dom为v6以上版本

import React, { Component } from 'react'
import {Link, BrowserRouter, Route, Routes, NavLink} from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'
import MyNavLink from './components/MyNavLink'
import './App.css'

export default class App extends Component {
  render() {
    return (
      <div>
        <NavLink to="/about">about</NavLink>   
        <NavLink to="/home/a">home</NavLink>   
        <Routes>
          {/* 路由精确匹配是确保路由路径与url一致实现的，v6以上版本不再需要exact */}
          <Route path="/about" element={<About/>}/>
          {/* 路由模糊匹配写法 */}
          <Route path="/home/:subpath?" element={<Home/>}/>
        </Routes>             
      </div>
    )
  }
}

react-router-dom为v6以下版本

import React, { Component } from 'react'
import {Link, BrowserRouter, Route, Routes, NavLink} from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'
import MyNavLink from './components/MyNavLink'
import './App.css'

export default class App extends Component {
  render() {
    return (
      <div>
        <NavLink to="/about">about</NavLink>   
        <NavLink to="/home/a">home</NavLink>   
        <Routes>
          <Route path="/about" component={About}/>
          {/* 路由模糊匹配写法:最前面的路径保持一致，脚手架会自动寻找；精确匹配写法：加exact属性 */}
          <Route exact path="/home" component={Home}/>
        </Routes>             
      </div>
    )
  }
}