路由react-router-dom的基本如何使用好代码教程

react-router-dom路由简介现代的前端页面大多是SPA(单页面应用程序)，也就是只有一个HTML页面的程序，这样用户体验好，服务器压力小，所以更

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

设置默认路由

一进入这个页面，就展示这个组件，通过将路径设置成"/"来实现。

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.当点

全站频道