react路由的匹配模式(模糊匹配、精确匹配)

目录

一 模糊匹配

二 精确匹配

---

一 模糊匹配

react路由默认情况下使用的是 模糊匹配
模糊匹配规则: 只要pathname(link的to属性/地址栏url的pathname)是以<Route>的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组件对应的<Route>的path属性是 /

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

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

二 精确匹配

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

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

修改上面的代码

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

 修改使pathname和path完全一样

能匹配到了