react-路由

1.下载依赖

javascript 复制代码
npm i react-router-dom

2.配置文件 router/index.js

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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.使用方法

javascript 复制代码
import { useLocation,useNavigate } from 'react-router-dom'

//获取路由信息
const action = useLocation()

//路由跳转
  const navigate = useNavigate()
  navigate('/home')
相关推荐
人工智能训练师2 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny072 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy3 小时前
css的基本知识
前端·css
昔人'3 小时前
css `lh`单位
前端·css
Nan_Shu_6145 小时前
Web前端面试题(2)
前端
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队6 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光6 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5206 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20507 小时前
LeaferJS好用的 Canvas 引擎
前端·开源