当前位置: 首页> 游戏> 游戏 > react中嵌套路由以及默认显示二级路由

react中嵌套路由以及默认显示二级路由

时间:2025/7/10 18:08:03来源:https://blog.csdn.net/2202_75509848/article/details/140631087 浏览次数:0次

1.安装插件

npm install react-router-dom

2.新建文件及页面

在scr/page下新建layout、about、home文件夹,分别在对应的文件夹下新建入口文件index.js;src下新建router文件夹,该文件夹下新建入口文件index.js

3.配置路由

如何配置路由:http://t.csdnimg.cn/dJ8C2

src/router/index.js

// 1.引入方法,用于创建路由实例
import { createBrowserRouter } from 'react-router-dom' // 2.引入组件
import LoginPage from '../page/login';
import IndexPage from '../page/index';
import Layout from '../page/layout';
import About from '../page/about';
import Home from '../page/home';// 3.创建router实例,配置路由
const router = createBrowserRouter([ {path:"/layout",element:<Layout></Layout>,children:[{index:true, // 默认显示该路由element:<About></About>},{path:'/layout/home',element:<Home></Home>}]},{// path:"/login", // searchParams方式传参path:"/login/:id/:name", // params方式传参element:<LoginPage></LoginPage> // 渲染页面的地方},{path:"/index",element:<IndexPage></IndexPage>},{path:"",element:<div>欢迎来到首页</div>}
])// 4.暴露路由实例,用于在App.js主入口组件
export default router;

4.页面编写

src/page/about/index.js

function About(){return (<div>我是about</div>)
}export default About

src/page/home/index.js

function Home(){return (<div>我是home</div>)
}export default Home

src/page/layout/index.js

// 说明:该组件作为一级路由渲染页面,Outlet是用于渲染二级路由页面的标签,是固定写法import { Link, Outlet, useNavigate } from "react-router-dom"function Layout() {const navigate = useNavigate()return (<div><div>我是layout</div><button onClick={() => navigate('')}>跳转到about</button><Link to="/layout/home">跳转到home</Link><Outlet></Outlet></div>)
}export default Layout

如何跳转路由:http://t.csdnimg.cn/n0Tgr

src/App.js

import React, { useState, useRef, useEffect, useContext, createContext } from 'react';
// 1.引入
import { RouterProvider } from 'react-router-dom'
import router from './router';function App() {return (<div>{/* 2.绑定 */}<RouterProvider router={router}></RouterProvider></div>);
}export default App;

5.最终效果

关键字:react中嵌套路由以及默认显示二级路由

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: