路由react-router-dom的基本使用教程

更新時間：2023年02月02日 09:18:13 作者：滴水微瀾

在React中，路由是一套映射規(guī)則，是URL路徑與組件的對應關系。使用React路由，就是配置路徑和組件的對應關系，這篇文章主要介紹了路由react-router-dom的使用,需要的朋友可以參考下

react-router-dom路由簡介

現(xiàn)代的前端頁面大多是SPA(單頁面應用程序)，也就是只有一個HTML頁面的程序，這樣用戶體驗好，服務器壓力小，所以更受歡迎。路由是使用單頁面來管理原來多頁面的功能。路由的功能：從一個頁面，跳轉到另一個頁面。在React中，路由是一套映射規(guī)則，是URL路徑與組件的對應關系。使用React路由，就是配置路徑和組件的對應關系。React的一切都是組件，可以像思考組件一樣看待路由。

react-router-dom路由的基本使用

//1.安裝庫
npm i react-router-dom
//2.<Router>在根組件上包裹所有內(nèi)容組件
<Router>
//3.<Link點擊跳轉到目標組件頁面
<Link to="/first">頁面一</Link>定義一個跳轉鏈接
//4.<Routes>包裹具體的路由定義
 <Routes>
  <Route path="/first" element={<First/>}/>
</Routes>

import React from "react";
import {BrowserRouter as Router, Route, Link, Routes} from "react-router-dom"
 
// import {HashRouter as Router, Route, Link, Routes} from "react-router-dom"
 
const First = () => {
  return (
      <p>這是First組件頁面</p>
  )
}
 
class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
            路由主頁
            <Link to="/first">頁面一</Link>
            <Routes>
              <Route path="/first" element={<First/>}/>
            </Routes>
          </div>
        </Router>
    );
  }
}

設置默認路由

一進入這個頁面，就展示這個組件，通過將路徑設置成"/"來實現(xiàn)。

class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
            路由主頁
            <Link to="/first">頁面一</Link>
            <Routes>
              <Route path="/first" element={<First/>}/>
              <Route path={"/"} element={<Login/>}/>
            </Routes>
          </div>
        </Router>
    );
  }
}

常用組件介紹

Router組件

包裹整個應用，在根組件上添加，一個React應用只添加一次。Router有兩種，HashRouter和BrowserRouterHashRouter使用URL的hash值實現(xiàn) （http://localhost:3000/#/first）BrowserRouter使用H5的history API實現(xiàn) （http://localhost:3000/first）HashRouter和BrowserRouter是無縫切換的

import {BrowserRouter as Router, Route, Link, Routes} from "react-router-dom"
 
// import {HashRouter as Router, Route, Link, Routes} from "react-router-dom"

Link組件在頁面中最終會轉換成a標簽。to中設置的值是瀏覽器上面的路由地址

location.pathname
'/first'

<Link to="/first">頁面一</Link>

Route組件指定路由展示組件的相關信息path屬性：路由規(guī)則element屬性：展示的組件Route寫在哪，路由渲染出來的組件就展示在哪。

<Routes>
  <Route path="/first" element={<First/>}/>
</Routes>

路由的執(zhí)行過程

1.當點擊頁面中的Link標簽時，修改瀏覽器地址中的url

2.React路由監(jiān)聽地址欄url的變化

3.React遍歷所有的Route組件，使用路由規(guī)則（path）與pathname進行匹配

4.當路由規(guī)則path能夠匹配地址欄中的pathname時，就展示這個Route對應組件的內(nèi)容。

import React from "react";
import {BrowserRouter as Router, Route, Link, Routes} from "react-router-dom"
 
// import {HashRouter as Router, Route, Link, Routes} from "react-router-dom"
 
 
const First = () => <p>這是First組件頁面</p>
const Home = () => <h2>這是home主頁</h2>
 
class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
 
            <Routes>
              <Route path="/first" element={<First/>}/>
              <Route path={"/home"} element={<Home/>}/>
            </Routes>
            路由主頁
            <br/>
            <Link to="/first">頁面一</Link>
            <br/>
            <Link to={"/home"}>Home主頁</Link>
          </div>
        </Router>
    );
  }
}

編程式導航

編程式導航是使用js代碼的形式實現(xiàn)的導航。

class Login extends React.Component{
  handleClick = () => {
    //history是在Routes選擇route展示組件時，自動傳入的。 
    //this.props.history.push("/manager") 
       
    let history = useHistory()
    history.push("/manager")
  }
 
  render() {
    return (
        <div>
          登錄頁面
          <button onClick={this.handleClick}>點擊登錄</button>
        </div>
    );
  }
}
 
const Manager = (props) => {
  let history = useHistory()
 
  const handleClick = () => {
    history.go(-1)
  }
 
  return (
      <div>
        管理后臺
        <button onClick={handleClick}>返回到登錄頁面</button>
      </div>
  )
}

匹配模式

模糊匹配-默認

React的路由匹配模式是模糊匹配的

匹配規(guī)則是：只要pathname以path開頭，那么這個path對應的組件就會被匹配成功，就會展示出來。直白說，只要跳轉的路由頁面的路由比較長/login/a/b，那么這個對應組件的父級，祖父級組件都能匹配到，并展示出來。如：/, /login, /login/a, /login/a/b。子級組件展示了，它的上級組件直到根組件都會展示出來。好像新版本v6這個匹配規(guī)則無效了

精確匹配只有當pathname和path完全一樣時，才會展示。在Route標簽中加exact進行修飾

<Route exact path={"/"} element={<Login/>}/>

版本變遷useHistory使用方式變化：react-router-dom v4 可以使withRouter (函數(shù)組件里可以用這個方法), class組件里可以直接this.props.history.pushreact-router-dom v5 是使用 useHistoryreact-router-domv6開始useNavigate取代了原先版本中的useHistory方法使用對比

useHistory用法
import { useHistory } from "react-router-dom";  //引入
 
 //使用:
// history.push({path:"/home"}); 也可以是對象 還可以傳值 params,state,search 都能傳 。
 const history = useHistory();
 history.push("/home");
 
useNavigate用法
import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
navigate.push("/home");

到此這篇關于路由react-router-dom的使用的文章就介紹到這了,更多相關路由react-router-dom的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: