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;
}
相关推荐
丰锋ff22 分钟前
计网学习笔记第2章 物理层(灰灰题库)
笔记·学习
阿絮~2 小时前
Apache RocketMQ进阶之路阅读笔记和疑问
笔记·apache·rocketmq
天水幼麟7 小时前
动手学深度学习-学习笔记(总)
笔记·深度学习·学习
天水幼麟10 小时前
动手学深度学习-学习笔记【二】(基础知识)
笔记·深度学习·学习
绿皮的猪猪侠10 小时前
算法笔记上机训练实战指南刷题
笔记·算法·pta·上机·浙大
沧海一笑-dj10 小时前
【51单片机】51单片机学习笔记-课程简介
笔记·学习·51单片机·江科大·江科大学习笔记·江科大单片机·江科大51单片机
老虎062710 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
大苏打seven11 小时前
Docker学习笔记:Docker网络
笔记·学习·docker
kikikidult15 小时前
(2025.07)解决——ubuntu20.04系统开机黑屏,左上角光标闪烁
笔记·ubuntu
近津薪荼15 小时前
初学者关于数据在内存中的储存的笔记
笔记