React Router 6

最新推荐文章于 2024-09-30 18:55:14 发布

liump

最新推荐文章于 2024-09-30 18:55:14 发布

阅读量173

点赞数 3

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_40830536/article/details/136283197

版权

本文详细介绍了如何在React中使用ReactRouter6创建基本路由和嵌套路由，包括使用BrowserRouter配置和通过Outlet动态渲染子组件的过程。

摘要由CSDN通过智能技术生成

React Router 6

记录 React Router 6 创建路由的过程

基础路由

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
// 1.创建 router 实例对象并且配置路由对应关系
const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>login</div>
  }
])
const root = ReactDom.createRoot(document.getElementById('root'))
root.render(
    <RouterProvider router={router} />
)

嵌套路由

使用 Outlet 创建嵌套路由

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* 
      	子路由
      		根据 /messages 渲染<DashboardMessages />
      		根据 /tasks 渲染<DashboardTasks />
      	*/}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}