react中的路由----匹配模式（精确匹配）

问题：下面的代码会导致，Home页面一直在页面中。
原因： 1、Home页面是默认路由，一进入页面就可以看到home页面
2、默认路由是模糊匹配，当点击“登陆页面”的时候，会进行模糊匹配，home页面
依然会匹配到

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"));

解决： 精确匹配 只有当path和pathname完全匹配才会展示该路由

推荐：给默认路由添加exact属性。

给Route组件添加exact属性，让其变为精确匹配模式

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="/" exact component={
    
     Home } ></Route>
            <Route path="/login" component={
    
    Login}></Route>
        </div>
    </Router>
)

ReactDOM.render(<App />, document.getElementById("root"));