当前位置: 首页 > news >正文

react-路由

1.下载依赖

npm i react-router-dom

2.配置文件  router/index.js

import { createBrowserRouter,Navigate } from'react-router-dom';
import main from '../pages/mian';
import home from '../pages/home/index';
const routes = [{path: '/',Component: main,children: [// 重定向{path: '/',element: <Navigate to="home" replace />},{path: '/home',Component: home}]}
]export default createBrowserRouter(routes)

3.创建文件   pages/mian.js

import React from "react";
import { Outlet } from "react-router-dom";
const main = () => {return (<div><h1>Welcome to my React App!</h1><p>This is the main component.</p>{/* 显示子文件位置 */}<Outlet /></div>);
}
export default main;

4.创建页面组件  pages/home/index.js

import React from 'react';const home = () => {return (<div><h1>Home Page</h1><p>Welcome to the Home Page!</p></div>);
}
export default home

5.在入口文件App.js导入router

import { RouterProvider } from 'react-router-dom';
import router from './router'
function App() {return (<div className='app'><RouterProvider router={router}></RouterProvider></div>);
}export default App;

6.使用方法

import { useLocation,useNavigate } from 'react-router-dom'//获取路由信息
const action = useLocation()//路由跳转const navigate = useNavigate()navigate('/home')


http://www.mrgr.cn/news/62519.html

相关文章:

  • pip在ubuntu下换源
  • 【Mac】Homebrew
  • 有理函数的不定积分
  • Unix和Linux系统中的文件权限
  • RuoYi-Vue 使用开发 人员管理-查询功能
  • 海外云手机是什么?对外贸电商有什么帮助?
  • K8S自建企业私有云方案 单台起配 NVMe全闪存储性能
  • SpringBoot常用注解
  • 电脑使用技巧:电脑分区如何合并?
  • YOLO11论文 | 实用脚本 | 绘制多个实验的loss、mAP@0.5、mAP@0.5:0.95的高级图像【科研必备 + 绘图神器】
  • 性价比高的挂耳式耳机有哪些?五大性价比高的挂耳式耳机推荐
  • java 集合类详解
  • Navigation组件页面跳转
  • day14:RSYNC同步
  • Python自动化数据备份与同步
  • 工业设计岗位18K招聘,要求必须会AI,但AI究竟该怎么学呢?
  • HJ108 求最小公倍数
  • 《JVM第3课》运行时数据区
  • Java开发者的Python快速进修指南:文件操作
  • 键盘监听事件xss攻击
  • C++学习日记 | LAB 11 类中的动态内存管理
  • (五)Web前端开发进阶2——AJAX
  • Fsm3
  • Diving into the STM32 HAL-----USART
  • X86下fftw3库的编译和链接undefined reference to fftwf_malloc
  • 什么是ajax,为什么使用ajax?ajax都有哪些优点和缺点?