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

1.安装插件

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

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

javascript 复制代码
function About(){
    return (
        <div>我是about</div>
    )
}

export default About

src/page/home/index.js

javascript 复制代码
function Home(){
    return (
        <div>我是home</div>
    )
}

export default Home

src/page/layout/index.js

javascript 复制代码
// 说明:该组件作为一级路由渲染页面,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

javascript 复制代码
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.最终效果

相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫3 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel4 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手8 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法8 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript