react-router-dom@6.4 路由使用

react-router路由使用篇

1. 路由安装
2. 路由使用
3. 嵌套路由

路由安装

1. 在npm中找到要使用的版本，尽量选择稳定的版本
   www.npmjs.com/package/rea…
2. npm install react-router-dom@6.4.1 我选择的是6.4版本
   官网地址：reactrouter.com/en/6.4.3/ro…

路由使用

1. 路由有两种模式history(browser)，hash(路径中含有#)，下面使用的是browser
2. 在react项目中的index.js文件中使用router RouterProvider:所有的路由对象都需要通过RouterProvider组件来渲染你的应用。
   createBrowserRouter：是6.4版本的api。在所有react web项目中都建议使用router。它底层是用DOM History API对url的更新来管理，它存储在对应的history栈
   route: 它是react router中最重要的东西，他将url和组件连接起来。通过路由嵌套，复杂的应用程序布局和数据依赖变得简单和声明性。

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
const router = createBrowserRouter([
  {
    path: "/",
    element: <Tesm />,
    children: [
      {
        path: "balance",
        element: <Balance />,
      },
    ],
  },
  {
    path: "/angle",
    element: <Angle />,
  },
]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router}>
      <App />
  </RouterProvider>
);

嵌套路由<Outlet>

<Outlet>应该在父路由元素中使用，呈现其子路由元素。这允许在呈现子路由时显示嵌套UI。如果父路由完全匹配，它将呈现子索引路由，如果没有索引路由则不呈现子索引路由。

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
       <!-- This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/" -->   
      <Outlet />
    </div>
  );
}

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