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;
}
相关推荐
聪明的笨猪猪1 小时前
Java Spring “IOC + DI”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
im_AMBER2 小时前
Web 开发 24
前端·笔记·git·学习
烧冻鸡翅QAQ3 小时前
考研408笔记
笔记·考研
StarPrayers.3 小时前
卷积层(Convolutional Layer)学习笔记
人工智能·笔记·深度学习·学习·机器学习
能不能别报错4 小时前
K8s学习笔记(十五) pause容器与init容器
笔记·学习·kubernetes
无言以对,沉默不语,随你随你。4 小时前
【解决办法】GitBash不能在任意文件夹打开
经验分享·笔记·git
牛马大师兄5 小时前
STM32独立看门狗IWDG与窗口看门狗WWDG知识梳理笔记
笔记·stm32·单片机·嵌入式硬件·嵌入式·看门狗
wan5555cn5 小时前
Windows 11系统鼠标键盘被禁用问题的全面解决方案
windows·笔记·深度学习·计算机外设
zhangrelay5 小时前
ROS云课三分钟-使用动态参数重配置调试Teb导航案例-251008
笔记·学习
BingeBlog6 小时前
[01] Qt的UI框架选择和对比
开发语言·c++·笔记·qt·ui·开源软件