目录

一 模糊匹配

二 精确匹配

---

一 模糊匹配

react路由默认情况下使用的是 模糊匹配
模糊匹配规则: 只要pathname(link的to属性/地址栏url的pathname)是以的path属性的值开头,就能匹配成功
 

 代码

import React from "react";
import {createRoot} from 'react-dom/client';
//导入路由的核心组件
import {HashRouter, BrowserRouter as Router, Route, Link} from "react-router-dom"
 
const Home = () => <p>我是home页面p>
const Login = () => <p>我是login页面p>
 
class App extends React.Component {
    render() {
        return (
            <Router>
                <h2>模糊匹配h2>
                <Link to="/first/a/b/c">去登录页面Link>
                <Route path="/" component={Home}>Route>
                <Route path="/first" component={Login}>Route>
            Router>
        )
    }
}
 
 
createRoot(document.getElementById('root')).render(<App/>);

效果

默认路由显示home组件

 点击链接 "去登录页面" → 显示Home和Login 组件

来看一下是怎么匹配的

首先 pathname 是 /first/a/b/c

Home组件对应的的path属性是 /

Login 组件对应的的path属性是 /first

模糊匹配规则: 只要pathname(link的to属性/地址栏url的pathname)是以的path属性的值开头,就能匹配成功

二 精确匹配

精确匹配规则: 当pathname(link的to属性/地址栏url的pathname)和的path属性的值 完全相同时,才能匹配成功

精确匹配使用方式: 给Route组件添加exact属性

修改上面的代码

 pathname /first/a/b/c 匹配不到 / 和 /first

 修改使pathname和path完全一样

能匹配到了