快捷導(dǎo)航

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

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

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

react-router-dom路由簡(jiǎn)介

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

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

//1.安裝庫(kù)
npm i react-router-dom
//2.<Router>在根組件上包裹所有內(nèi)容組件
<Router>
//3.<Link點(diǎn)擊跳轉(zhuǎn)到目標(biāo)組件頁(yè)面
<Link to="/first">頁(yè)面一</Link>定義一個(gè)跳轉(zhuǎn)鏈接
//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組件頁(yè)面</p>
  )
}
 
class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
            路由主頁(yè)
            <Link to="/first">頁(yè)面一</Link>
            <Routes>
              <Route path="/first" element={<First/>}/>
            </Routes>
          </div>
        </Router>
    );
  }
}

設(shè)置默認(rèn)路由

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

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

常用組件介紹

Router組件

包裹整個(gè)應(yīng)用，在根組件上添加，一個(gè)React應(yīng)用只添加一次。Router有兩種，HashRouter和BrowserRouterHashRouter使用URL的hash值實(shí)現(xiàn) （http://localhost:3000/#/first）BrowserRouter使用H5的history API實(shí)現(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組件在頁(yè)面中最終會(huì)轉(zhuǎn)換成a標(biāo)簽。to中設(shè)置的值是瀏覽器上面的路由地址

location.pathname
'/first'

<Link to="/first">頁(yè)面一</Link>

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

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

路由的執(zhí)行過程

1.當(dāng)點(diǎn)擊頁(yè)面中的Link標(biāo)簽時(shí)，修改瀏覽器地址中的url

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

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

4.當(dāng)路由規(guī)則path能夠匹配地址欄中的pathname時(shí)，就展示這個(gè)Route對(duì)應(yīng)組件的內(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組件頁(yè)面</p>
const Home = () => <h2>這是home主頁(yè)</h2>
 
class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
 
            <Routes>
              <Route path="/first" element={<First/>}/>
              <Route path={"/home"} element={<Home/>}/>
            </Routes>
            路由主頁(yè)
            <br/>
            <Link to="/first">頁(yè)面一</Link>
            <br/>
            <Link to={"/home"}>Home主頁(yè)</Link>
          </div>
        </Router>
    );
  }
}

編程式導(dǎo)航

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

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

匹配模式

模糊匹配-默認(rèn)

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

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

精確匹配只有當(dāng)pathname和path完全一樣時(shí)，才會(huì)展示。在Route標(biāo)簽中加exact進(jìn)行修飾

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

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

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

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

您可能感興趣的文章: