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;
}
相关推荐
bicijinlian27 分钟前
多语言笔记系列:使用导入魔法命令
笔记
foo1st3 小时前
JDK(Ubuntu 18.04.6 LTS)安装笔记
java·笔记·ubuntu
DKPT3 小时前
常见正则表达式整理与Java使用正则表达式的例子
java·笔记·学习·面试·正则表达式
下雨的Jim3 小时前
前端速成之——Script
前端·笔记
爱码小白3 小时前
wordpress学习笔记
笔记·学习
我的golang之路果然有问题4 小时前
快速上手GO的net/http包,个人学习笔记
笔记·后端·学习·http·golang·go·net
大溪地C4 小时前
HTML5 详细学习笔记
笔记·学习·html5
帅云毅4 小时前
文件上传--解析漏洞和编辑器
笔记·学习·安全·web安全·编辑器·php
Dlrbw5 小时前
FPGA——DDS信号发生器设计
笔记·fpga开发
0509155 小时前
测试基础笔记第十一天
java·数据库·笔记