react中的路由----匹配模式(模糊匹配)

问题描述: 当 Link组件的to 属性值为 “/login”时,为什么默认路由 也被匹配成功?

默认情况下,React 路由是模糊匹配模式

模糊匹配规则:只要pathname 以 path 开头就会匹配成功

在这里插入图片描述

在这里插入图片描述

import React from "react";
import ReactDOM from "react-dom";
import {
    
     BrowserRouter as Router, Route, Link } from "react-router-dom";
// 匹配模式 模糊匹配

const Home = () => <p>进入页面你就可以看到我</p>
const Login = () => <p>我是Login组件内容</p>

const App = () => (
    // 1、Router包裹整个应用
    <Router>
        <div>
            <h1>默认路由:</h1>
            <Link to="/login">登陆页面</Link>
            // 默认路由
            <Route path="/" component={
    
     Home } ></Route>
            <Route path="/login" component={
    
    Login}></Route>
        </div>
    </Router>
)
ReactDOM.render(<App />, document.getElementById("root"));

依然可以走匹配模式,匹配成功

import React from "react";
import ReactDOM from "react-dom";
import {
    
     BrowserRouter as Router, Route, Link } from "react-router-dom";
// 匹配模式 模糊匹配
const Home = () => <p>进入页面你就可以看到我</p>
const Login = () => <p>我是Login组件内容</p>
const App = () => (
    // 1、Router包裹整个应用
    <Router>
        <div>
            <h1>默认路由:</h1>
            <Link to="/login/5656">登陆页面</Link>
            <Route path="/" component={
    
     Home } ></Route>
            <Route path="/login" component={
    
    Login}></Route>
        </div>
    </Router>
)
ReactDOM.render(<App />, document.getElementById("root"));

猜你喜欢

转载自blog.csdn.net/weixin_43131046/article/details/120347654
今日推荐