React開發中使用react-router-dom路由最新版本V5.1.2（一）基本跳轉屬性

react路由分為2個大的版本3.x及之前是個大的版本（react-router）、4.x之后又是一個大的版本（react-router-dom），下面我們來用5.1.2版本的基本使用方法

首先在我們的react項目中安裝路由

npm install react-router-dom -S
或者
yarn add react-router-dom -S

基本的簡單列子

import React from "react";
/**
 * BrowserRouter 相當於vue里的history
 * HashRouter 相當於vue里的hash url里帶#號訪問
 * Switch 相當於vue里router-view
 * Link 就是用來進行跳轉的了
 */
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Home from './Home';
import About from './About';
import Dashboard from './Dashboard';
export default class Index extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/dashboard">Dashboard</Link>
            </li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/about">
              <About />
            </Route>
            <Route path="/dashboard">
              <Dashboard />
            </Route>
          </Switch>
        </div>
      </Router>
    );
  }
}

這時候在頁面上就是看到，然后點擊about

 

 

同時在switch里我們還可以這樣寫<Route exact path="/" component={Home}/>不用包裹

import React from "react";
import {
  HashRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Home from './Home';
import About from './About';
import Dashboard from './Dashboard';
export default class Index extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/dashboard">Dashboard</Link></li>
          </ul>
          <hr />
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/dashboard" component={Dashboard}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

這次用的HashRouter

 

 

 

 其實component意思就是需要返回一個虛擬dom

我們可以直接在里面返回簡單的dom

<Route exact path="/dashboard" component={()=><div>這樣也可以不</div>}/>

精准匹配

在上面的<Route>里我們看到有個exact屬性，這個屬性的意思就是精准匹配uri，意思就是uri必須和path是一樣的才能匹配到對應的內容

我們把dashboard的exact去掉看一下結果===>

 

 

 /dashboard 和 /dashboard/qweq 都能跳轉到，/about/qwer卻匹配不到內容了

其實exact多個斜杠還是可以匹配到的，還有一個屬性，strict叫完美匹配，多一個斜杠都不行

404和switch

switch我們在java或者js里都用過，意思就是只會匹配到一個，如果都匹配不到就會去default

<Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/about" component={About}/>
            <Route exact path="/dashboard" component={()=><div>這樣也可以不</div>}/>
            <Route component={()=><div>哦豁，404嘍！</div>}/>
 </Switch>

　　

 

 下一篇再說參數傳遞以及動態路由跳轉