React的路由

1. 什么是前端路由

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行渲染

2. 创建路由开发环境

bash 复制代码
# 使用CRA创建项目
npm create-react-app react-router-pro

# 安装最新的ReactRouter包
npm i react-router-dom

# 启动项目
npm run start

3. 快速开始

js 复制代码
import React from 'react'
import ReactDOM from 'react-dom/client'

const router = createBrowserRouter([
  {
    path:'/login',
    element: <div>登录</div>
  },
  {
    path:'/article',
    element: <div>文章</div>
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router}/>
)

问题:上面的路由和组件耦合了

解决办法:把路由模块抽象出来

抽象路由模块

相关推荐
林太白12 分钟前
NestJS-角色模块
前端·javascript·nestjs
种豆走天下15 分钟前
VUE进阶案例
前端·javascript·vue.js
陈随易20 分钟前
盘点微信开发者工具V1和V2的区别
前端·后端·程序员
zengyuhan50322 分钟前
使用Rust 串口通信 及 MTP文件获取
前端·rust
小宋搬砖第一名24 分钟前
阿里云部署小白教程
前端
陈随易26 分钟前
ECharts v6.0发布,新布局,新主题,新功能
前端·后端·程序员
HHW27 分钟前
更快更强的 JavaScript 运行时:Bun 入门与实践指南
前端·javascript
好奇心笔记31 分钟前
现代Web开发最佳实践:2025年前沿技术与工程化指南
前端
小宁爱Python33 分钟前
Vue3 状态管理新选择:Pinia 从入门到实战
前端·javascript·vue.js
培根芝士1 小时前
使用 Canvas 替代 <video> 标签加载并渲染视频
前端·javascript·音视频