React12.路由

Posted 2022-09-14 阿拉的梦想

【React】12.路由

• 1.路由介绍
• 2.路由的基本使用
• • 2.1 安装路由组件
  • 2.2 导入路由组件
  • 2.3使用Router组件包裹整个应用
  • 2.4 子路由
  • 2.5 HashRouter
  • 2.6 Link标签

1.路由介绍

现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个html 页面的应用程序。因为它的用户体验更好、对服务器的压力重小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由
应运而生。

• 前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）
• 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系
• 使用React路由简单来说，就是配置路径和组件的对应关系

2.路由的基本使用

2.1 安装路由组件

安装yarn，已有的跳过

npm install -g yarn

使用yarn 安装路由组件

yarn add react-router-dom

2.2 导入路由组件

import 
  BrowserRouter,
  Routes,
  Route,
  Link,Outlet
 from "react-router-dom";

2.3使用Router组件包裹整个应用

完整示例：

import React from 'react'
import ReactDOM from 'react-dom/client'

//1.导包
import 
  BrowserRouter,
  Routes,
  Route,
  Link,Outlet
 from "react-router-dom";


const First = () =>
  console.log("first")
  return  (<p>第一条内容</p>)




const Home = () => (
  <div>
    <h1>路由</h1>
    /* 2. 定义link就是超链接，跳转到指向的页面 */
    <Link to='/first'>first</Link>
    /* 若要显示子路由的内容，必须要有Outlet */
    <Outlet />
  </div>
)


const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  //渲染
  //3.定义路由路径
  <BrowserRouter>
    <Routes>
      <Route path="/" element=<Home />>
        /* <Route path='first' element=<First /> /> */
      </Route>
      <Route path='/first' element=<First /> />
    </Routes>
  </BrowserRouter>
)

效果：

点击first跳转到另一个页面：

2.4 子路由

Route 下面可以有子路由，子路由的全路径=父路由路径+子路由路径。
父路由下必须包含<Outlet />才能在父页面下展示子页面。

2.5 HashRouter

不推荐。HashRouter是使用URL的hash值实现，会使浏览器的地址根目录以#开头，其他看不出差别。
只需要将BrowserRouter换成HashRouter标签即可，其他无需改动。

2.6 Link标签

会被编译成一个a标签。to属性编译成href。