脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → 路由react-router-dom的使用

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

 更新时间：2023年02月02日 09:18:13   作者：滴水微澜  
在React中，路由是一套映射规则，是URL路径与组件的对应关系。使用React路由，就是配置路径和组件的对应关系，这篇文章主要介绍了路由react-router-dom的使用,需要的朋友可以参考下

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");

到此这篇关于路由react-router-dom的使用的文章就介绍到这了,更多相关路由react-router-dom的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React中设置样式style方式

    React中设置样式style方式

    这篇文章主要介绍了React中设置样式style方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • React 并发功能体验(前端的并发模式)

    React 并发功能体验(前端的并发模式)

    React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Facebook 负责维护,本文给大家介绍React 并发功能体验前端并发模式的问题，感兴趣的朋友跟随小编一起看看吧
    2021-07-07
  • 一百多行代码实现react拖拽hooks

    一百多行代码实现react拖拽hooks

    这篇文章主要介绍了一百多行代码实现react拖拽hooks，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • React useEffect使用教程

    React useEffect使用教程

    useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合
    2022-10-10
  • React 中引入 CSS 高阶用法的方案详解

    React 中引入 CSS 高阶用法的方案详解

    这篇文章主要介绍了React中引入CSS高阶用法的方案详解,至于使用react用哪种方案引入css,并没有一个绝对的答案,可以根据各自情况选择合适的方案,需要的朋友可以参考下
    2024-02-02
  • react-native只保留3x图原理解析

    react-native只保留3x图原理解析

    这篇文章主要为大家介绍了react-native只保留3x图原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • React hooks使用方法全面汇总

    React hooks使用方法全面汇总

    这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-10-10
  • react-router-dom简介(推荐)

    react-router-dom简介(推荐)

    react-router包含三种类型的组件：路由组件、路由匹配组件 、导航组件，在你使用这些组件的时候，都必须先从react-router-dom引入，这篇文章主要介绍了react-router-dom简介,需要的朋友可以参考下
    2022-12-12
  • 详解如何使用React和MUI创建多选Checkbox树组件

    详解如何使用React和MUI创建多选Checkbox树组件

    这篇文章主要为大家详细介绍了如何使用 React 和 MUI（Material-UI）库来创建一个多选 Checkbox 树组件,该组件可以用于展示树形结构的数据,并允许用户选择多个节点,感兴趣的可以了解下
    2024-01-01
  • react-router中Link标签和a标签有什么区别

    react-router中Link标签和a标签有什么区别

    本文主要介绍了react-router中Link标签和a标签有什么区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06

最新评论