react 路由

学习了好一段时间,终于学到了react 路由这个环节。不管是哪个语言,也不管是哪个框架,路由的定义都是一样的。所以,我也就不多说废话,直接来实际的。

安装

bash 复制代码
npm install react-router-dom

配置

1、main.tsx 文件的配置

在 main.tsx 文件中做如下配置

javascript 复制代码
import ReactDOM from 'react-dom/client' //引入路由的依赖文件



ReactDOM.createRoot(document.getElementById('root')!).render(
 
    <App />
  
)

整体的代码大概长下面这样子

javascript 复制代码
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
    <App />
)

2、路由文件的配置

在 src 的目录下 新建一个 router 目录,再在该目录下新建一个 index.tsx 文件,在文件中做如下书写。

javascript 复制代码
import { useRoutes } from 'react-router-dom' //引入路由的依赖项

import Login from '../views/Login' //页面文件


const routes = [
    {
        path:'/login/:id',   //访问的路径,后面的id是动态参数
        element:<Login></Login>
    }
]

export default function RouterView(){
    const elem = useRoutes(routes)
    return elem;
}
相关推荐
yangzhi_emo34 分钟前
ES6笔记4
前端·笔记·es6
星梦清河1 小时前
宋红康 JVM 笔记 Day16|垃圾回收相关概念
java·jvm·笔记
誰能久伴不乏2 小时前
Modbus 速查与实战笔记(功能码、帧结构、坑点)
笔记
easy20202 小时前
从机器学习的角度实现 excel 中趋势线:揭秘梯度下降过程
笔记·机器学习·线性回归
Hóng xīng qiáo3 小时前
swVBA自学笔记014、Lisp适合对SolidWorks进行二次开发吗 ?
开发语言·笔记·lisp
Magnetic_h4 小时前
【iOS】block复习
笔记·macos·ios·objective-c·cocoa
带娃的IT创业者4 小时前
《AI大模型应知应会100篇》第68篇:移动应用中的大模型功能开发 —— 用 React Native 打造你的语音笔记摘要 App
人工智能·笔记·react native
wan5555cn11 小时前
多张图片生成视频模型技术深度解析
人工智能·笔记·深度学习·算法·音视频
雁于飞13 小时前
vscode中使用git、githup的基操
笔记·git·vscode·学习·elasticsearch·gitee·github
rannn_11113 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html