笔记十八、路由中重定向和路由表的使用

「爱情、让人受尽委屈。」 2024-05-01 16:23 103阅读 0赞

重定向

<Route path="/" element={<Navigate to="about" />} />

路由表的使用

引入

const element = useRoutes(routes);

路由表 routes/index.jsx

import { Navigate } from "react-router-dom";
    import About from "../components/About";
    import Home from "../components/Home";
    
    export default [
      {
        path: "/home",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About />,
      },
      {
        path: "/",
        element: <Navigate to="about" />,
      },
    ];

App.jsx -> 函数式组件

import React from "react";
    import {Link, useRoutes} from "react-router-dom";
    import routes from "./routes/index.jsx";
    import "./app.css"
    
    const App = () => {
        // 引入路由表
        const element = useRoutes(routes);
        return (
            <div className="all">
                <div>
                    <div className="link">
                        <Link to="/home">打开首页的页面</Link>
                    </div>
                    <div className="link">
                        <Link to="/about">打开关于的页面</Link>
                    </div>
                </div>
                <div className="view">
                    {element}
                </div>
            </div>
        );
    }
    
    export default App;

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记十八、路由中重定向和路由表的使用

路由表 routes/index.jsx。App.jsx -> 函数式组件。

「爱情、让人受尽委屈。」/ 2024年05月01日 16:23/ 0 赞/ 104 阅读

相关路由重定向和别名

路由重定向和别名；路由重定向；路由别名

蔚落/ 2024年04月20日 12:08/ 0 赞/ 120 阅读

相关 P04: ReactRouter路由重定向-Redirect使用

React Router 阐述标签式重定向编程式重定向示例 ReactRouterDemo\\demo01\\src\\inde

待我称王封你为后i/ 2023年10月06日 20:58/ 0 赞/ 81 阅读

相关 Angular中的路由配置、路由重定向、默认选中路由

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

港控/mmm°/ 2023年10月06日 09:04/ 0 赞/ 115 阅读

相关 VUE - 路由的使用和重定向

什么是路由：后端路由: 对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源前端路由：对于单页面应用程序来说，主要通过UR

快来打我*/ 2023年06月28日 09:57/ 0 赞/ 65 阅读

相关功能：登录和退出（表单重置和预验证、路由导航守卫、路由重定向）

3.登录/退出功能 > 3.1登录概述 3.1-1.登录业务流程 ①在登录页面输入用户名和密码 ②调用后台接口进行验证 ③通过验证之后，根据后台的响应状态跳转

我就是我/ 2023年03月04日 06:33/ 0 赞/ 39 阅读

相关路由 vue-router 路由守卫路由重定向路由嵌套路由守卫路由命名路由懒加载

Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表

傷城~/ 2022年12月02日 01:04/ 0 赞/ 396 阅读

相关 router路由默认值和重定向

当进入首页面的时候，希望页面渲染首页的内容，而不是空白的的时候可以在router里面重新重定向配置 ![在这里插入图片描述][watermark_type_ZmFuZ3po

素颜马尾好姑娘i/ 2022年11月09日 03:49/ 0 赞/ 185 阅读

相关 Vue中路由的嵌套与重定向

文章目录路由的嵌套与重定向为什么要使用路由的嵌套为什么要使用路由的重定向用法示例源码

太过爱你忘了你带给我的痛/ 2022年04月18日 02:37/ 0 赞/ 435 阅读

相关 vue-router:重定向路由理解

资料 [转自][Link 1] [官网][Link 2] 为什么使用重定向路由开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打

清疚/ 2022年01月20日 04:21/ 0 赞/ 549 阅读