react路由使用

react路由使用

路由

import React from "react";
import { Navigate } from "react-router-dom";
// 实际加载
import NoteFound from "@/pages/NoteFound";
// 路由的懒加载
const Home = React.lazy(() => import("@/pages/Home"));
const About = React.lazy(() => import("@/pages/About"));
const Recommend = React.lazy(() => import("@/pages/Recommend"));

const routes = [
  // Navigate 重定向
  { path: "/", element: <Navigate to="/home" /> },
  { path: "/home", element: <Home /> },
  {
    path: "/about",
    element: <About />,
    children: [
      // 当跳转到 about 时 自动跳转到 about下的home路由
      { path: "/about", element: <Navigate to="home" /> },
      { path: "home", element: <Home /> },
      { path: "recommend", element: <Recommend /> },
    ],
  },
  { path: "*", element: <NoteFound /> },
];

export default routes;

在组件中使用

单独文件中

import { Link, useRoutes } from "react-router-dom";
import "@/pages/App/App.css";
import routes from "@/router";

export default function App() {
  return (
    <div className="App">
      <h1>头部</h1>

      <h3>
        <Link to={"/home"}>首页</Link>
        <Link to={"/about"}>关于</Link>
        <Link to={"/about/recommend"}>推荐</Link>
      </h3>

      {/* 路由在组件中使用 */}
      {useRoutes(routes)}
    </div>
  );
}

组件中

import { Link, useRoutes, Routes, Route, Navigate } from "react-router-dom";
import "@/pages/App/App.css";
import routes from "@/router";

export default function App() {
  return (
    <div className="App">
      <h1>头部</h1>

      <h3>
        <Link to={"/home"}>首页</Link>
        <Link to={"/about"}>关于</Link>
        <Link to={"/about/recommend"}>推荐</Link>
      </h3>

      <Routes>
        {/* Navigate 重定向 */}
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NoteFound />} />
      </Routes>
    </div>
  );
}