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')
相关推荐
m0_749317524 分钟前
Maven学习
java·前端·后端·学习·maven
Coderfuu20 分钟前
Java Web 3 Axios & Vue组件库
前端·javascript·vue.js
闭上眼让寒冷退却24 分钟前
axios笔记
前端·笔记
小C好好干饭25 分钟前
Vue网页屏保
前端·javascript·vue.js
叶浩成52027 分钟前
draggable插件——实现元素的拖动排序——拖动和不可拖动的两种情况处理
前端·javascript·vue.js
刘大浪30 分钟前
vue npm install出现问题
前端·vue.js·npm
繁依Fanyi30 分钟前
打造一个有点好看的 uniapp 网络测速软件
前端
素质白嫖怪34 分钟前
element Plus中 el-table表头宽度自适应,不换行
前端·javascript·vue.js
嘿,小苹果43 分钟前
Vue3技术开发,使用纯CSS3动手制作一个3D环绕的相册展示效果,支持传入任意图片.3D轮播相册的组件
前端·3d·css3
guokanglun1 小时前
css实现圆周运动效果
前端·css