react crash course 2024(7) react router dom

安装

复制代码
npm i react-router-dom

引入

复制代码
import {Route,createBrowserRouter,createRoutesFromElements,RouterProvider} from 'react-router-dom'

在app.jsx

复制代码
const router = createBrowserRouter(
  createRoutesFromElements(<Route index element = {<h1>My App</h1>}/>)
)

const App = () => {
  return <RouterProvider router={router}/>
}

使用object写路由

复制代码
const router = createBrowserRouter([
  {
    path:"/",
    element:(
      <h2>hello rainbow</h2>
    )
  },{
    path:"about",
    element:<h2>little puppy</h2>
  }
])

或直接使用<Route/>组件写路由

复制代码
const router = createBrowserRouter(
  createRoutesFromElements(
  <Route path='/' element={<h2>hello rainbow</h2>}></Route>
))

路由嵌套

复制代码
const router = createBrowserRouter(
  createRoutesFromElements(
  <Route path='/' element={<MainLayout/>}>
    <Route   path="contact" element = {<h5 >some peopel just bad</h5>}/>
  </Route>
))

别忘了放子路由出口

在父 route 元素中使用outlet来渲染其子 route 元素。这允许在渲染子路由时显示嵌套 UI。

相关推荐
伍哥的传说24 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783825 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊37 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
马特说2 小时前
React金融数据分析应用性能优化实战:借助AI辅助解决18万数据量栈溢出Bug
react.js·金融·数据分析
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript