react-router v6嵌套路由重定向

最新推荐文章于 2023-09-18 11:31:14 发布
最新推荐文章于 2023-09-18 11:31:14 发布
阅读量828 收藏
点赞数
分类专栏： react typeScript 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq8241994/article/details/126769823
版权

问题比较简单：当使用react-router v6中的useRoutes进行路由配置的时候：在这里插入图片描述
这样配置有一个问题就是当我访问根目录的时候：localhost:1234/。这个时候只会展示Main组件内容，但是我想让他重定向到/feature-management，我配置了*路径的处理：

但是并不管用。

最终的处理结果是：我仅仅把Main组件的path 从 /改为/*，然后就可以实现了。。。
嗯，有点小无语，研究了半天才发现

百岁如流富贵冷灰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 Packages 这个存储库是我们使用管理的monorepo。 这意味着我们实际上从相同的代码库发布了几个包到npm，包括: Package Version Docs Description React Router的核心 react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react--router的开发由React Training和许多的贡献者完成。 如果您有兴趣了解更多关于React能为您的公司做什么的事情，请联
React-Router v6 新特性解读及迁移指南
热门推荐
前端劝退师
03-19 2万+
前言 这里写自定义目录标题前言1. ``重命名为``2. ``的新特性变更3. 嵌套路由变得更简单3.1 简化嵌套路由定义3.2 新`API`:`Outlet`3.3 多个``4. 用`useNavigate`代替`useHistory`5. 新钩子`useRoutes`代替`react-router-config`。6. 大小减少：从`20kb`到`8kb`7. 迁移及其它重要修复...结语❤️...
【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet
xuxuii的博客
08-15 1万+
react-router: 路由的核心库，提供了很多的：组件、钩子。包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等。等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增等。变为等。useParams、、useMatch等。官方明确推荐函数式组件了！！！…......
React 像 vue 一样配置页面路由，并支持重定向路由，路由守卫等（使用 useRoutes 完成）
卡尔特斯
09-18 530
配置中则完成路由重定向的等基础操作，不太习惯使用。封装了一个路由组件，并附带展示个路由守卫组件。扩展路由配置，支持重定向，以及方便扩展其他属性。
解决react-router-dom V6路由嵌套时，子路由无法显示的问题
江咏之
08-17 3444
You rendered descendant (or called `useRoutes()`) at "/home" (under ) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never re
react-router-dom v6的重定向
m0_54849873的博客
03-08 3146
import { useEffect } from "react"; import { useNavigate } from "react-router-dom"; function Redirect({ to }) { let navigate = useNavigate(); useEffect(() => { navigate(to); }); return null; } // usage <Routes> <Route path="/" el
React 像 vue 一样配置页面路由，并支持重定向路由，路由守卫等（使用 useRoutes 完成）...
最新发布
卡尔特斯
09-18 274
希望达到跟 vue 一样，在 js 配置中则完成路由重定向的等基础操作，不太习惯使用 Routes、Route 等互相包裹的方式。 所有基于 react-router[email protected] 封装了一个路由组件，并附带展示个路由守卫组件。 路由组件 - ExRouter.tsx：<ExRouter routes={routes}></ExRouter> 扩展路由配置，支持...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
koa-react-router：用于koa 2的react-router中间件
02-03
npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所...
react-router-v6:在此仓库中，我了解了React Router v6的一些基础知识
04-17
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
SimpleRouteWithReact:这是一个简单的网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据
05-20
这是一个简单的React网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据。入门使用此应用之前，请检查您的PC是否具有reactJs工作环境。 打开Git Bash。 将当前工作目录更改为要克隆...
最新React Router6和之前的React Router有哪些区别？快速上手React Router6-下篇
qq_41040989的博客
02-22 161
这是继上一篇文章react router6与之前react-router的区别的下篇，主要介绍了react-router6中的一些常用的hook，供大家快速上手react router6，以及工作中使用时快速查阅
react-router v6 hook——useRoutes教程
qq_51574759的博客
12-27 1126
上面的路由系统有一个问题：路由是通过标签形式管理，当有大量路由的时候，其易读性和架构就会变得不好，可以把这种路由模式类比XML，并与Json相比，他们在写法的优缺点上有明显的相似。如果你写过VUE，应该还记得VUE中的路由并不是这样的，而是抽离出来，作为一个对象数组去管理路由。，就会返回一个保存有路由组件的变量，在需要使用的地方。首先可以如图创建路由文件夹，管理路由文件。使用很简单，只需要将刚刚的路由对象传入。字段重定向，我们需要重定向，如从。申明路由使用的组件，而不能使用。字面意识是没有包裹在。
Antd Pro 路由转发redirect
小子宝丁的博客
09-14 859
`antd pro` 路由转发时，原路由和目标路由须在同一层。
使用 useRoutes构建路由
qq_16828495的博客
07-21 718
1.创建src/routers/index.js。安装react-router-dom。
React Router V6实现嵌套路由重定向
徐忠炜的博客
05-18 5233
react router在v6版本取消了<Redirect/>，并使用<Navigate to=''/>实现重定向功能。 一级路由重定向 比如访问localhost:3000/ 重定向到 localhost:3000/homepage，我们得这样写： const routerMap = [ { path: 'homepage', element: <Homepage/> }, { path: '/', element: <N
react-router V6 版本的使用（自己封装了 Redirect，使用 useRoute 等）
qq_45803050的博客
05-21 2334
react-router V6 版本的使用（自己封装了 Redirect等） IndexRouter.js 使用useRoute 做全局路由的搭建，包括嵌套路由，路由重定向，路由拦截（自己封装），路由懒加载（做了一个简单的封装）等 import React from 'react'; import {useRoutes} from "react-router-dom"; import LazyLoad from "./Lazyload"; import NewsSandBox from "../views/
浅析React Router V6 useRoutes的使用
ncgNCGg的博客
01-10 2万+
本篇文章记录了useRoutes第一个参数的使用方法，暂不涉及第二个参数。
react-router-dom v6 重定向
06-28
import { Redirect } from 'react-router-dom' function SomeComponent() { return <Redirect to="/some-path" /> } ``` 在上面的代码中，当组件 SomeComponent 被渲染时，浏览器将会被重定向到 "/some-path"。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值