React之路由的使用

配置

React Router(react-router-dom V6 整理)

• 安装 react-router-dom

npm i ract-router-dom

• 配置项目根目录的 index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import App from "./routes";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);

reportWebVitals();

• 新建 routes/index.js 文件并配置

import React from "react";
import { Route, Routes } from "react-router-dom";
import Bro from "../views/Brother";
import Home from "../views/Home";
import Father from "../views/Index";
import Son from "../views/Son";
import Test from "../views/Test";

const MyRouter = () => {
  return (
    <Routes>
      <Route path="/" Component={Father} />
      <Route path="/test" Component={Test} />
      <Route path="/home" Component={Home} />
      <Route path="/son" Component={Son} />
      <Route path="/bro" Component={Bro} />
    </Routes>
  );
};
export default MyRouter;

懒加载

React.Suspense

[!note] 懒加载顾名思义就是只有被用到的时候才会被加载页面，不消耗资源

import App from "@/routes";
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    {/* fallback中的内容可⾃定义 */}
    <React.Suspense fallback={<div>Loading</div>}>
      <App />
    </React.Suspense>
  </BrowserRouter>
);

import React, { lazy } from "react";
import { Route, Routes } from "react-router-dom";

const Home = lazy(() => import("@/views/Home"));
const Father = lazy(() => import("@/views/Index"));
const Bro = lazy(() => import("@/views/Brother"));
const Son = lazy(() => import("@/views/Son"));
const Test = lazy(() => import("@/views/Test"));

const MyRouter = () => {
  // TODO：这里为什么要使用Component而不是Element
  // TODO：懒加载又如何实现
  return (
    <Routes>
      <Route path="/" Component={Father} />
      <Route path="/test" Component={Test} />
      <Route path="/home" Component={Home} />
      <Route path="/son" Component={Son} />
      <Route path="/bro/:name" Component={Bro} />
    </Routes>
  );
};
export default MyRouter;

跳转页面

• 前进

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

const RenderIndex = () => {
  const navigate = useNavigate();

  return (
    <>
      <div>我是Index页面</div>
      {/* navigate('/son') => 前往路由为/son的页面 */}
      <button onClick={() => navigate("/son")}>跳转到Son页面</button>
    </>
  );
};

export default RenderIndex;

• 前进带参数
  • 方法一：

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

const RenderIndex = () => {
  const navigate = useNavigate();

  const goToBro = () => {
    navigate("/bro", { state: { username: "苏小妍" } });
  };

  return (
    <>
      <div>我是Index页面</div>
      {/* navigate('/son') => 前往路由为/son的页面 */}
      <button onClick={() => navigate("/son")}>跳转到Son页面</button>
      <button onClick={() => goToBro()}>跳转到Bro页面</button>
    </>
  );
};

export default RenderIndex;

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

const RenderBro = () => {
  const location = useLocation();
  // 获取传参
  useEffect(() => {
    console.log("useLocation=====>>>", location.state.username);
  }, []);
  return (
    <>
      <div>我是Bro页面</div>
    </>
  );
};

export default RenderBro;

• 方法二

import React from "react";
import { Route, Routes } from "react-router-dom";
import Bro from "../views/Brother";
import Home from "../views/Home";
import Father from "../views/Index";
import Son from "../views/Son";
import Test from "../views/Test";

const MyRouter = () => {
  return (
    <Routes>
      <Route path="/" Component={Father} />
      <Route path="/test" Component={Test} />
      <Route path="/home" Component={Home} />
      <Route path="/son" Component={Son} />
      <Route path="/bro/:name" Component={Bro} />
    </Routes>
  );
};
export default MyRouter;

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

const RenderIndex = () => {
  const navigate = useNavigate();

  const goToBro = () => {
    navigate("/bro/苏小妍");
  };

  return (
    <>
      <div>我是Index页面</div>
      {/* navigate('/son') => 前往路由为/son的页面 */}
      <button onClick={() => navigate("/son")}>跳转到Son页面</button>
      <button onClick={() => goToBro()}>跳转到Bro页面</button>
    </>
  );
};

export default RenderIndex;

import { useEffect } from "react";
import { useParams } from "react-router-dom";

const RenderBro = () => {
  const params = useParams();
  // 获取传参
  useEffect(() => {
    console.log("params=====>>>", params.name);
  }, []);
  return (
    <>
      <div>我是Bro页面</div>
    </>
  );
};

export default RenderBro;

• 返回

import { useNavigate } from "react-router-dom";
const RenderSon = () => {
  const navigate = useNavigate();
  return (
    <>
      <div>我是Son页面</div>
      {/* navigate(-1) => 返回上一页 */}
      {/* 想返回几层就输入-多少 */}
      <button onClick={() => navigate(-1)}>返回上一页</button>
    </>
  );
};

export default RenderSon;