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 天前
【JavaEE初阶】网络原理——TCP处理先发后至问题
java·网络·笔记·网络协议·tcp/ip·java-ee
colus_SEU1 天前
【计算机网络笔记】第二章 应用层 (Application Layer)
笔记·计算机网络·1024程序员节
摇滚侠1 天前
Spring Boot3零基础教程,SpringSecurity 测试,笔记81
spring boot·笔记·后端
Momentary_SixthSense1 天前
rust笔记
开发语言·笔记·rust
能不能别报错1 天前
K8s学习笔记(二十四) ingress
笔记·学习·kubernetes
Olrookie1 天前
Maven快速上手笔记
java·笔记·maven
能不能别报错1 天前
K8s学习笔记(二十三) 网络策略 NetworkPolicy
笔记·学习·kubernetes
摇滚侠1 天前
Spring Boot3零基础教程,定制 Health 健康端点,笔记83
spring boot·笔记·spring
ysa0510301 天前
利用数的变形简化大规模问题#数论
c++·笔记·算法
报错小能手1 天前
计算机网络自顶向下方法10——应用层 HTTP/2 成帧 响应报文优先次序和服务器推
笔记·计算机网络