日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：滴水微瀾 ? 更新時間： 2023-04-01 編程語言

react-router-dom路由簡介

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

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

//1.安裝庫
npm i react-router-dom
//2.<Router>在根組件上包裹所有內容組件
<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>
    );
  }
}

設置默認路由

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

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

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值實現 （http://localhost:3000/#/first）BrowserRouter使用H5的history API實現 （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屬性：路由規則element屬性：展示的組件Route寫在哪，路由渲染出來的組件就展示在哪。

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

路由的執行過程

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

2.React路由監聽地址欄url的變化

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

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

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代碼的形式實現的導航。

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的路由匹配模式是模糊匹配的

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

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

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

版本變遷useHistory使用方式變化：react-router-dom v4 可以使withRouter (函數組件里可以用這個方法), 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");

原文鏈接：https://www.cnblogs.com/zhou--fei/p/17084530.html

欄目分類
最近更新