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

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

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

抽象路由模块

相关推荐
.生产的驴5 分钟前
SpringBoot 接口国际化i18n 多语言返回 中英文切换 全球化 语言切换
java·开发语言·spring boot·后端·前端框架
吃瓜群众i16 分钟前
理解Javascript闭包
前端·javascript
安大桃子20 分钟前
Mapbox GL + Deck.gl 三维实战:Mapbox 加载 Tileset3D 倾斜摄影模型
前端·webgl
yede23 分钟前
多行文本省略号显示,更多按钮展开全部
前端
就是我25 分钟前
React 应用性能优化实战
前端·react.js·性能优化
G扇子28 分钟前
深入解析XSS攻击:从原理到防御的全方位指南
前端·安全
Blucas29 分钟前
《深入 PageSpy》二:入门指南
javascript·前端框架
snakeshe101033 分钟前
入解析React性能优化策略:eagerState的工作原理
前端
六边形66634 分钟前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli34 分钟前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript