React router中设置默认路由

追影的React开发者

已于 2022-05-31 14:29:07 修改

阅读量2w

点赞数 4

分类专栏： React 文章标签： react.js vue.js elementui

于 2019-05-18 15:54:52 首次发布

本文链接：https://blog.csdn.net/qq_36658051/article/details/90316323

版权

React 专栏收录该内容

32 篇文章 5 订阅

订阅专栏

需求，设置Product为默认路由

<Route path="/area" component={Area} />
<Route path="/product" component={Product} />

方法1

<Route path="/" component={Product} exact />
<Route path="/area" component={Area} />
<Route path="/product" component={Product} />

方法2

<Redirect path="/" to="/product" />
<Route path="/area" component={Area} />
<Route path="/product" component={Product} />

区别：方法2用 Redirect 会重定向url，推荐方法1

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

追影的React开发者

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react-router-dom路由配置

读心悦

05-17

719

react-router-dom 是 React 的官方路由库，用于在 React 应用程序中实现单页面应用（SPA）的路由管理。下面是一个基本的 react-router-dom 路由配置示例：首先，确保你已经安装了 react-router-dom。

第4章、React-Router路由配置；

weixin_44121341的博客

04-12

568

React-Router路由配置

2 条评论您还未登录，请先登录后发表或查看评论

React配置默认路由

星云

01-05

1336

React v6 路由相关。

React Router - 默认二级路由配置

最新发布

听海边涛声

07-30

235

React Router - 默认二级路由配置

react中的路由----默认路由

imkaifan的博客

09-16

2370

问题：现在的路由都是点击导航菜单后展示的，如何在进入页面的时候就展示呢？ 默认路由：表示进入页面时就会匹配的路由 默认路由path为：/ 关键性的语法： <Route path="/" component={DefaultRoute} ></Route> import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route, Link }

React-Router v6设置默认路由

stpzhf的博客

12-18

986

【代码】React-Router v6设置默认路由。

react-router之默认路由与多组路由

youhebuke225的博客

05-20

2211

<Route>标签上有一个属性为index,他就是用来控制默认展示的子路由的 import { Routes, Route, useNavigate, NavLink, Navigate, Outlet, } from "react-router-dom"; export default function App() { return ( <div className="App"> .

react中默认路由

dongwang的博客

10-17

640

开发中React router6路由表多级路由嵌套的默认子路由问题

VX_WJ88950106的博客

08-14

2506

最近小新在写一个基于React Hooks+Mobx+axios+react-router-dom v6+antD的前端项目，在进行二级路由配置时遇到了一些问题。path：" / " 时，重定向到Layout的子组件Home，路径为 " /home "。组件，然后再去重定向，渲染出子组件Home。，用路由表来统一管理路由，但是这个时候问题出现了。但是再一看，当点击其他的子路由，比如这个例子中的。时，他会渲染对应的子路由，但是！这个属性上，再定义一组子路由规则，但是。打开界面一看效果，嘿～还真行，...

React 路由 V6

Rêve

07-07

1164

React router根据路由自动生成路由

weixin_53690696的博客

02-26

528

react react-router 根据路径自动配置路由信息

react router中设置默认路由

zuo_zuo_blog的博客

06-19

2982

1.引入所需插件 import {HashRouter as Router,Route,Redirect,Link,NavLink} from ‘react-router-dom’ 2.设置默认路由 方法一 <Route path="/" component={MyTable} exact></Route> <Route path="/myTable" component={MyTable}></Route> 方法二 <Redirect pat

React-router默认路由配置[V5与V6版本]

Blues_han的博客

02-26

321

react默认路由配置

React路由基础、路由基本使用、组件说明、执行过程、编程式导航、默认路由

七七的博客

11-14

1260

现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图（页面）导航到另一个视图（页面）前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件。

react-router6路由配置

samscat的博客

05-10

3335

React Router 6.x与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除，新增等。语法的变化：component={About} 变为 element={}等。新增多个hook：useParams、useNavigate、useMatch等。 … import './App.scss'; import { BrowserRouter as Router, Route, Routes,Outlet,Navigate,Link } from 'react-r

react 路由

weixin_44682587的博客

12-03

144

react 路由现代的前端应用大多都是 SPA(单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能:让用户从一个视图（页面）导航到另一个视图(页面) 前端路由是一套映射规则，在React中，是 URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件（配对) 使用步骤安装：yarn add react-router-dom 导

【React】1036- React 中的一些 Router 必备知识点

pingan8787

08-01

289

前言每次开发新页面的时候，都免不了要去设计一个新的 URL，也就是我们的路由。其实路由在设计的时候不仅仅是一个由几个简单词汇和斜杠分隔符组成的链接，偶尔也可以去考虑有没有更“优雅”的设计方...

React Router--2.4 默认路由（IndexRoute）与 IndexLink

jiangbo110119的博客

01-18

1896

默认路由（IndexRoute）与 IndexLink默认路由（IndexRoute）在解释 默认路由(IndexRoute) 的用例之前，我们来设想一下，一个不使用默认路由的路由配置是什么样的：Router> Route path="/" component={App}> Route path="accounts" component={Accounts}/> Route p

react-router多级路由设置默认子路由

weixin_42367138的博客

10-10

3440

react-router多级路由设置默认子路由最终效果图目录文件路径代码最终效果图目录文件路径代码 src/App.js 多级路由的Route配置不能加 exact，否则子路由匹配不进去 import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import Home from './Page/Home' import News from './Page/N

React Router 中文PDF文档：详解路线配置与高级功能

5. **默认路由（IndexRoute）与IndexLink**：这两个概念用于指定当访问根路径时应显示哪个组件，以及如何在组件之间进行导航。 6. **高级用法**：包括动态路由（通过参数匹配动态路径）、跳转前确认（防止意外导航...