React 全栈体系（十八）

news/2024/7/15 18:26:51 标签: react.js, javascript, 前端

第九章 React Router 6

二、代码实战

6. 路由的 params 参数

请添加图片描述

6.1 routes
javascript">/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import Detail from "../pages/Detail";
import { Navigate } from "react-router-dom";

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "news",
        element: <News />,
      },
      {
        path: "message",
        element: <Message />,
        children: [
          {
            path: "detail/:id/:title/:content",
            element: <Detail />,
          },
        ],
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
];
6.2 Detail.jsx
javascript">/* src/pages/Detail.jsx */
import React from "react";
import { useParams } from "react-router-dom";

export default function Detail() {
  const { id, title, content } = useParams();
  // const x = useMatch('/home/message/detail/:id/:title/:content')
  // console.log(x)
  return (
    <ul>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  );
}
6.3 Message.jsx
javascript">/* src/pages/Message.jsx */
import React, { useState } from "react";
import { Link, Outlet } from "react-router-dom";

export default function Message() {
  const [messages] = useState([
    { id: "001", title: "消息1", content: "锄禾日当午" },
    { id: "002", title: "消息2", content: "汗滴禾下土" },
    { id: "003", title: "消息3", content: "谁知盘中餐" },
    { id: "004", title: "消息4", content: "粒粒皆辛苦" },
  ]);
  return (
    <div>
      <ul>
        {messages.map((m) => {
          return (
            // 路由链接
            <li key={m.id}>
              <Link to={`detail/${m.id}/${m.title}/${m.content}`}>
                {m.title}
              </Link>
            </li>
          );
        })}
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet />
    </div>
  );
}

7. 路由的 search 参数

请添加图片描述

7.1 routes
javascript">/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import Detail from "../pages/Detail";
import { Navigate } from "react-router-dom";

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "news",
        element: <News />,
      },
      {
        path: "message",
        element: <Message />,
        children: [
          {
            path: "detail",
            element: <Detail />,
          },
        ],
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
];
7.2 Detail.jsx
javascript">/* src/pages/Detail.jsx */
import React from "react";
import { useSearchParams, useLocation } from "react-router-dom";

export default function Detail() {
  const [search, setSearch] = useSearchParams();
  const id = search.get("id");
  const title = search.get("title");
  const content = search.get("content");
  const x = useLocation();
  console.log("@", x);
  return (
    <ul>
      <li>
        <button onClick={() => setSearch("id=008&title=哈哈&content=嘻嘻")}>
          点我更新一下收到的search参数
        </button>
      </li>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  );
}
7.3 Message.jsx
javascript">/* src/pages/Message.jsx */
import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'

export default function Message() {
	const [messages] = useState([
		{id:'001',title:'消息1',content:'锄禾日当午'},
		{id:'002',title:'消息2',content:'汗滴禾下土'},
		{id:'003',title:'消息3',content:'谁知盘中餐'},
		{id:'004',title:'消息4',content:'粒粒皆辛苦'}
	])
	return (
		<div>
			<ul>
				{
					messages.map((m)=>{
						return (
							// 路由链接
							<li key={m.id}>
								<Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>
							</li>
						)
					})
				}
			</ul>
			<hr />
			{/* 指定路由组件的展示位置 */}
			<Outlet />
		</div>
	)
}

8. 路由的 state 参数

8.1 routes
javascript">/* src/routes/index.js */
import About from "../pages/About";
import Home from "../pages/Home";
import Message from "../pages/Message";
import News from "../pages/News";
import Detail from "../pages/Detail";
import { Navigate } from "react-router-dom";

export default [
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "news",
        element: <News />,
      },
      {
        path: "message",
        element: <Message />,
        children: [
          {
            path: "detail",
            element: <Detail />,
          },
        ],
      },
    ],
  },
  {
    path: "/",
    element: <Navigate to="/about" />,
  },
];
8.2 Detail.jsx
javascript">/* src/pages/Detail.jsx */
import React from "react";
import { useLocation } from "react-router-dom";

export default function Detail() {
  const {
    state: { id, title, content },
  } = useLocation();
  return (
    <ul>
      <li>消息编号：{id}</li>
      <li>消息标题：{title}</li>
      <li>消息内容：{content}</li>
    </ul>
  );
}
8.3 Message.jsx
javascript">/* src/pages/Message.jsx */
import React, { useState } from "react";
import { Link, Outlet } from "react-router-dom";

export default function Message() {
  const [messages] = useState([
    { id: "001", title: "消息1", content: "锄禾日当午" },
    { id: "002", title: "消息2", content: "汗滴禾下土" },
    { id: "003", title: "消息3", content: "谁知盘中餐" },
    { id: "004", title: "消息4", content: "粒粒皆辛苦" },
  ]);
  return (
    <div>
      <ul>
        {messages.map((m) => {
          return (
            // 路由链接
            <li key={m.id}>
              <Link
                to="detail"
                state={{
                  id: m.id,
                  title: m.title,
                  content: m.content,
                }}
              >
                {m.title}
              </Link>
            </li>
          );
        })}
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet />
    </div>
  );
}

9. 编程式路由导航

请添加图片描述

9.1 Header.jsx
javascript">/* src/components/Header.jsx */
import React from "react";
import { useNavigate } from "react-router-dom";

export default function Header() {
  const navigate = useNavigate();

  function back() {
    navigate(-1);
  }
  function forward() {
    navigate(1);
  }

  return (
    <div className="col-xs-offset-2 col-xs-8">
      <div className="page-header">
        <h2>React Router Demo</h2>
        <button onClick={back}>←后退</button>
        <button onClick={forward}>前进→</button>
      </div>
    </div>
  );
}
9.2 Message.jsx
javascript">/* src/pages/Message.jsx */
import React, { useState } from "react";
import { Link, Outlet, useNavigate } from "react-router-dom";

export default function Message() {
  const navigate = useNavigate();
  const [messages] = useState([
    { id: "001", title: "消息1", content: "锄禾日当午" },
    { id: "002", title: "消息2", content: "汗滴禾下土" },
    { id: "003", title: "消息3", content: "谁知盘中餐" },
    { id: "004", title: "消息4", content: "粒粒皆辛苦" },
  ]);

  function showDetail(m) {
    navigate("detail", {
      replace: false,
      state: {
        id: m.id,
        title: m.title,
        content: m.content,
      },
    });
  }
  return (
    <div>
      <ul>
        {messages.map((m) => {
          return (
            // 路由链接
            <li key={m.id}>
              <Link
                to="detail"
                state={{
                  id: m.id,
                  title: m.title,
                  content: m.content,
                }}
              >
                {m.title}
              </Link>
              <button onClick={() => showDetail(m)}>查看详情</button>
            </li>
          );
        })}
      </ul>
      <hr />
      {/* 指定路由组件的展示位置 */}
      <Outlet />
    </div>
  );
}
9.3 App.jsx
javascript">/* src/App.jsx */
import React from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";
import Header from "./components/Header";

export default function App() {
  //根据路由表生成对应的路由规则
  const element = useRoutes(routes);
  return (
    <div>
      <div className="row">
        <Header />
      </div>
      <div className="row">
        <div className="col-xs-2 col-xs-offset-2">
          <div className="list-group">
            {/* 路由链接 */}
            <NavLink className="list-group-item" to="/about">
              About
            </NavLink>
            <NavLink className="list-group-item" to="/home">
              Home
            </NavLink>
          </div>
        </div>
        <div className="col-xs-6">
          <div className="panel">
            <div className="panel-body">
              {/* 注册路由 */}
              {element}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

http://www.niftyadmin.cn/n/5054187.html

相关文章

华为云云耀云服务器L实例评测｜基于开源库 Stable Diffusion web UI部署AI绘画应用

华为云云耀云服务器L实例评测｜基于开源库 Stable Diffusion web UI部署AI绘画应用

前言 随着云计算时代的进一步深入&#xff0c;越来越多的中小企业企业与开发者需要一款简单易用、高能高效的云计算基础设施产品来支撑自身业务运营和创新开发。基于这种需求&#xff0c;华为云焕新推出华为云云服务器实例新品。 华为云云服务器具有智能不卡顿、价优随心用、…
阅读更多...
Momentum Contrast for Unsupervised Visual Representation Learning 论文学习

Momentum Contrast for Unsupervised Visual Representation Learning 论文学习

1. 解决了什么问题&#xff1f; 非监督学习在自然语言处理非常成功&#xff0c;如 GPT 和 BERT。但在计算机视觉任务上&#xff0c;监督预训练方法要领先于非监督的方法。这种差异可能是因为各自的信号空间不同&#xff0c;语言任务有着离散的信号空间&#xff08;单词、短语等…
阅读更多...
JAVA浅谈Pair抽象类

JAVA浅谈Pair抽象类

1.业务场景 业务开发中会遇到一种情况&#xff0c;返回两个参数值&#xff0c;这两个参数值都有用到&#xff0c;所以我们一般都会用map集合进行key-value封装&#xff0c;或者写一个类来封装两个属性来返回&#xff0c;还有一种方式就是用org.apache.commons.lang3.tuple 包中…
阅读更多...
【VUE复习·6】监视属性watch：用途、两种写法、简写、应用时注意事项（重点）、深度监视（重点）

【VUE复习·6】监视属性watch：用途、两种写法、简写、应用时注意事项（重点）、深度监视（重点）

总览 1.监视属性是用来干什么的&#xff1f; 2.监视属性的两种写法 3.应用时注意事项 4.深度监视 一、监视属性是用来干什么的&#xff1f; 1.用途 监视一个值&#xff08;可以是基本属性 data&#xff0c;或者是计算属性 computed&#xff09;是否被改变。如果此值被改变&…
阅读更多...
C语言入门Day_26 结构体

C语言入门Day_26 结构体

目录 前言&#xff1a; 1.结构体的定义 2.结构体的使用 3.易错点 4.思维导图 前言&#xff1a; 变量只能表示单一的属性&#xff0c;比如用int去表示一个年龄&#xff0c;用float去表示一个身高或一个体重&#xff0c;一个字符串/字符数组去表示一个性别或一个名字。 …
阅读更多...
车辆信息查询API-支持车牌号码快速查询

车辆信息查询API-支持车牌号码快速查询

车辆信息查询API是一种基于互联网的服务&#xff0c;能够通过车牌号码快速获取有关车辆的基本信息。这项服务主要是为了方便用户查询车辆的基本情况&#xff0c;例如车辆的品牌、类型、发动机号码、车架号码以及车辆所在地等信息。在此&#xff0c;我们将介绍如何使用车辆信息查…
阅读更多...
Linux音频调试示例

Linux音频调试示例

Linux音频调试示例 Posted 2023-04-01 xxccry tags: 篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Linux音频调试示例相关的知识，希望对你有一定的参考价值。 Linux音频调试示例 硬件设计设备树在i2c节点添加设备使能i2s总线添加dai_link修改pinmux驱动co…
阅读更多...
7、SpringBoot_高级配置

7、SpringBoot_高级配置

一、配置高级 1.临时属性设置 1.1引出问题 如果目标电脑上8080端口已经使用&#xff0c;再次使用该端口会出现端口占用问题 解决方式 重新更换配置文件修改端口打包通过临时属性配置新端口更换配置文件 1.2添加临时属性配置 通过临时属性修改8080端口 java -jar 项目.jar…
阅读更多...
最新文章

Copyright @ 2022~2023