react-router 中 exact 精確匹配使用

應用場景

exact 需要在哪種場景使用

1. 當要匹配路由樣式 比如要匹配 to=“/” 但當跳轉到其他路由時  to=“/”路由到樣式還是存在，因為路由匹配是模糊的 所以要精確匹配 to=“/”路由時候需要加個 exact 來達到精確匹配的目的

2. 當 父路由為 to=“/about” 時候  嵌套的子路由也有 一個為 to=“/about” 但還有其它的子路由 分別是 to=“/about/user”  to=“/about/message”  

　 這時候子路由需要一種樣式，父路由也需要一種樣式，但是其中一個子路由和父路由一樣，這是要想將此路由樣式生效就需要用到 exact 來進行精確匹配

 

這里主要講第二種匹配

如圖：

     

 

 

 

 

 

代碼 （父路由）

     /about 路由不能精確匹配

　　如果 父路由 /about 進行精確匹配 那么當點擊子路由時候 父路由樣式將會失效

<div className="App">
  <NavLink exact to="/" activeClassName="link-active">首頁</NavLink>
  <NavLink to="/about" activeClassName="link-active">關於</NavLink>
  <NavLink to="/profile" activeClassName="link-active">我的</NavLink>
  <NavLink to="/user" activeClassName="link-active">用戶</NavLink>
  <hr/>
　// 匹配父路由所顯示的信息
  <Switch>
    <Route exact path="/" component={Home}></Route>
    <Route path="/about" component={About}></Route>
    <Route path="/profile" component={About}></Route>
    <Route path="/user" component={About}></Route>
  </Switch>
</div>

// 下面代碼展示 about 子路由 進行 精確匹配

<div>
      <h2>my/我的</h2>
      <NavLink exact to="/about" activeClassName="about-active">信息</NavLink>
      <NavLink exact to="/about/user" activeClassName="about-active">用戶</NavLink>
      <hr/>
      <Route path="/about" exact>
        個人信息
      </Route>
      <Route path="/about/user">
        用戶名稱
      </Route>
</div>

 

完整代碼

目錄

　　　　

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {BrowserRouter} from 'react-router-dom'

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

App.js

import React from "react";
import { NavLink, Switch, Route, withRouter} from "react-router-dom";

import Home from "./components/home";
import About from "./components/about";

import './app.css'

function App() {
  return (
    <div className="App">
      <NavLink exact to="/" activeClassName="link-active">首頁</NavLink>
      <NavLink exact to="/about" activeClassName="link-active">關於</NavLink>
      <NavLink to="/profile" activeClassName="link-active">我的</NavLink>
      <NavLink to="/user" activeClassName="link-active">用戶</NavLink>
      <hr/>
      <Switch>
        <Route exact path="/" component={Home}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/profile" component={About}></Route>
        <Route path="/user" component={About}></Route>
      </Switch>
    </div>
  );
}

export default withRouter(App);

app.css

a {
  margin: 0 10px;
}

a.active, a.link-active {
  color: red;
  font-size: 30px;
}

a.about-active {
  color: orange;
  font-size: 20px;
}

about.js

import React, { PureComponent } from 'react';
import { NavLink, Route } from 'react-router-dom';

class My extends PureComponent {
  state = {  }
  render() { 
    return ( 
    <div>
      <h2>我是about</h2>
      <NavLink exact to="/about" activeClassName="about-active">信息</NavLink>
      <NavLink exact to="/about/user" activeClassName="about-active">用戶</NavLink>
      <hr/>
      <Route path="/about" exact>
        個人信息
      </Route>
      <Route path="/about/user">
        用戶名稱
      </Route>
    </div> );
  }
}
 
export default My;

// home.js    profile.js   user.js   這幾個組件自己隨便寫，這里主要代碼在 App.js 和 about.js  里