问题描述: 当 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"));