基于react18.x和router v6创建一个简单的静态页面

效果示例图

README.md

学习网站

1.React官网：https://react.dev/
2.https://books.sangniao.com/manual/2512864574/848656128

创建项目

npx create-react-app <folder-name> -->没有react环境时
create-react-app <folder-name>

安装react-router-dom v6依赖

npm install react-router-dom --save

安装scss

npm install node-sass sass-loader --save-dev

项目目录

路由router/index.js

import { createBrowserRouter } from "react-router-dom";

import App from "../App";

import Docs from "../views/docs";
import Tutorial from "../views/tutorial";
import Blog from "../views/blog";
import Community from "../views/community";

import NotFound from "../views/error/404";

/**
 * loader 是 createBrowserRouter() 函数中一个可选的配置选项，用于异步加载路由组件。
 * 如果你的应用程序包含大量路由，并且这些路由对应的组件很大，则可以使用 loader 选项来实现按需加载，从而提高应用程序的性能和加载速度
 *
 * loader方法在渲染页面前执行，这个方法有一个对象参数，里面常用的有两个属性params和request
 * **/

/**
 * 通过 createBrowserRouter() 函数创建了一个基于浏览器的路由器
 * **/
const BrowserRouter = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    errorElement: <NotFound />,
    loader: ({ params, request }) => {
      console.log("[params]", params);
      console.log("[request]", request);
      return {};
    },
    children: [
      {
        path: "docs",
        element: <Docs />,
      },
      {
        path: "tutorial",
        element: <Tutorial />,
      },
      {
        path: "blog",
        element: <Blog />,
      },
      {
        path: "community",
        element: <Community />,
      },
    ],
  },
]);

export default BrowserRouter;

App.js

import { useEffect } from "react";
import { Link, Outlet, useLocation, useNavigate } from "react-router-dom";

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    console.log("[App]", location);
    if (location.pathname === "/") {
      navigate("/docs");
    }
  }, [location, navigate]);

  return (
    <>
      <div className="app-container">
        {/* 侧边菜单 */}
        <div className="sidebar-container">
          <ul className="sidebar-menu">
            {/* 使用ES6 模板字符串:动态添加className */}
            <li
              className={`sideBar-item ${
                location.pathname === "/docs" ? "sideBar-item-current" : ""
              }`}
            >
              <Link to={`docs`}>Docs</Link>
            </li>
            <li
              className={[
                "sideBar-item",
                location.pathname === "/tutorial" ? "sideBar-item-current" : "",
              ].join(" ")}
            >
              <Link to={`tutorial`}>Tutorial</Link>
            </li>
            <li
              className={`sideBar-item ${
                location.pathname === "/blog" ? "sideBar-item-current" : ""
              }`}
            >
              <Link to={`blog`}>Blog</Link>
            </li>
            <li
              className={`sideBar-item ${
                location.pathname === "/community" ? "sideBar-item-current" : ""
              }`}
            >
              <Link to={`community`}>Community</Link>
            </li>
          </ul>
        </div>
        {/* 内容 */}
        <div className="main-container">
          <Outlet />
        </div>
      </div>
    </>
  );
}

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import BrowserRouter from "./router";

import "./assets/css/style.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={BrowserRouter} />
  </React.StrictMode>
);

路由地址错误，打开404页面

error/404.jsx

import { useNavigate } from "react-router-dom";
import errorImg from "../../assets/images/404.jpg";
import "./404.scss";


let errorWrap = {
  width: "100%",
  height: "100vh",
  display: "flex",
  flexDirection: "column",
  overflow: "hidden",
  position: "relative",
};

function NotFound() {
  const navigate = useNavigate();

  function goHome() {
    navigate("/");
  }

  return (
    <>
      <div style={errorWrap}>
        <img style={{ width: "100%", height: "100vh" }} alt="" src={errorImg} />
        <div className="errorContent btnStyle" onClick={goHome}>
          返回首页
        </div>
        <div className={`tipsTxt tipsStyle`}>你的路径是不是有误？</div>
      </div>
    </>
  );
}

export default NotFound;

error/404.scss

.errorContent {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  font-weight: bold;
  color: #00a2ef;
  cursor: pointer;
}
.btnStyle {
  padding: 12px 16px;
  border: 2px dashed #00a2ef;
  border-radius: 8px;
}
.tipsTxt {
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
}
.tipsStyle {
  font-size: 16px;
  color: #999;
}

页面docs/index.jsx

import { useEffect } from "react";

function Docs() {
  useEffect(() => {
    console.log("[Doms]");
  }, []);

  return (
    <>
      <div>Docs</div>
    </>
  );
}

export default Docs;

页面tutorial/index.jsx

import { useEffect } from "react";

function Tutorial() {
  useEffect(() => {
    console.log("[Tutorial]");
  }, []);

  return (
    <>
      <div>Tutorial</div>
    </>
  );
}

export default Tutorial;