首页 > 其他分享 >react-路由

react-路由

时间:2024-10-31 13:46:11浏览次数:8  
标签:const router react home import main 路由

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')

标签:const,router,react,home,import,main,路由
From: https://blog.csdn.net/a2739294436/article/details/143393761

相关文章

  • vue3-ref 和 reactive
    文章目录vue3中ref和reactivereactive与ref不同之处ref处理复杂类型vue3中ref和reactiveref原理基本原理ref是Vue3中用于创建响应式数据的一个函数。它的基本原理是通过Object.defineProperty()(在JavaScript的规范中用于定义对象属性的方法)或者Proxy......
  • RouterSrv路由服务
    RouterSrv完成服务ROUTING开启路由转发,为当前实验环境提供路由功能。根据题目要求,配置单臂路由实现内部客户端和服务器之间的通信。IPTABLES添加必要的网络地址转换规则,使外部客户端能够访问到内部服务器上的dns、mail、web和ftp服务。INPUT、OUTPUT和FOREARD链默认拒绝(DR......
  • (系列十)Vue3中菜单和路由的结合使用,实现菜单的动态切换(附源码)
    说明  该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。   该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。   说明:OverallAuth2.0是一个简单、易懂、功能强大的权限+可视化流程管理系统。友情提醒:本篇文章是属于系......
  • 【React系列六】—React学习历程的分享
    前言接系列五讲解Router5之后,最新的路由版本是React-Router6,一些新增特性及使用方法讲解一、Router6和Router5的区别ReactRouter发布了三个不同的包:react-router:路由核心库,提供许多组件、钩子react-router-dom:包括了react-router所有内容,同时添加了用于DOM的组件,如<......
  • GaussDB数据计算路由层(Coordinator)关键技术方案
    GaussDBKernelV5版本的Catalog还是本地存储,所以还需要考虑catalog的持久化问题.未来演进元数据解耦,Coordinator无状态,就不需要考虑Catalog持久化问题了。但是跨节点场景下的事务提交在Coordinator上还是要持久化的。图14Coordinator模块图路由信息:每个表数据共分16384......
  • 路由控制技术
    路由控制概述定义与目的路由控制是网络管理的核心组成部分,旨在优化网络资源利用并提高整体性能。通过精心设计的策略,管理员可以实现对数据流的精细控制,确保关键业务获得优先处理,同时有效防止未经授权的访问和潜在的数据泄露风险。这种控制不仅能提升网络效率,还能显著增强......
  • 北京迅为iTOP-3588开发板网络环境配置电脑、开发板直连交换机或路由器
    北京迅为iTOP-3588开发板网络环境配置电脑、开发板直连交换机或路由器   RK3588是一款低功耗、高性能的处理器,适用于基于arm的PC和Edge计算设备、个人移动互联网设备等数字多媒体应用,RK3588支持8K视频编解码,内置GPU可以完全兼容OpenGLES1.1、2.0和3.2。RK3588引入了新一代......
  • react.js中何时使用useCallback
    useMemo用于记住值,减少重新渲染组件所需的时间。useCallback用于记住函数,通常是为了防止组件的重新渲染举例子组件接收回调函数作为 props父组件引入子组件:constgetList=useCallback(()=>fetch(`http://example.com/api/${userId}`),[userId],);return(<buttonon......
  • React前端框架
    1.React简介1.1React的起源和发展React是由Facebook的内部项目发展而来,最初用于构建Instagram的网站。2013年5月,React正式对外开源,迅速以其高效的性能和灵活的组件化特点受到开发者的广泛关注和使用。React的核心库主要关注于构建UI,因此常被认为是MVC(模型......
  • react.js中useMemo和useEffect的区别
    1、当messages发生变化时执行scrollToBottom方法useEffect(()=>{scrollToBottom();},[messages]);constscrollToBottom=()=>{//页面滚动到底部messagesEndRef.current?.scrollIntoView({behavior:"smooth"});}以上例子中,useEffect可以用useMemo代替吗?不可......