React 路由匹配模式

React 路由匹配模式
react中的路由按照路径的正则进行匹配，很容易出现同时匹配多个路由组件的情况，路由规则提供了一个唯一匹配模式组件：Switch

问题：添加Switch没有任何反应，且各个页面内容都不展示

<Switch><Redirect path="/" to="/login"/>{/* <Route path="/" exact><Redirect to="/login"/></Route> */}{/* <Route path="/" component={Main} /> */}<Route path="/login" component={Login}/><Route path="/reg" component={Reg}/><Route path="/main" component={Main}/>{/* 添加动态路由匹配规则 */}<Route path="/goods/:id/:name" component={Goods}/>{/* 添加查询字符串访问组件 */}<Route path="/brand" component={Brand}/><Route path="*" component={NotFound}/></Switch>

解决：经过排查是原因1.因为重定向Redirect里面没添加exact（严格匹配模式）
没有添加的情况下，会不断加载到当前绑定的login页面，一直循环，页面无论怎么点击都不会出现；2.，只会展示入口页面，路由默认路径是"/“,”/"跳转的是主页面，也是一直循环加载在主页面，可以在后面加上exact（严格模式），但这种方式跟第一种方式重复可以选择一种方式添加。
解决后：

<Switch><Redirect path="/" to="/login" exact/>{/* <Route path="/" exact><Redirect to="/login"/></Route> */}{/* <Route path="/" component={Main} exact /> */}<Route path="/login" component={Login}/><Route path="/reg" component={Reg}/><Route path="/main" component={Main}/>{/* 添加动态路由匹配规则 */}<Route path="/goods/:id/:name" component={Goods}/>{/* 添加查询字符串访问组件 */}<Route path="/brand" component={Brand}/><Route path="*" component={NotFound}/></Switch>

React 路由匹配模式相关推荐

vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
vue路由匹配实现包容性_包容性设计：面向老年用户的数字平等
vue路由匹配实现包容性 In Covid world, a lot of older users are getting online for the first time or using tec ...
vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图
vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是编程式导航... 通俗理解编程式导航 ...
16、React系列之 React 路由
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处作者:TigerChain 地址:http://www.jianshu.com/p/b55cf53e633a 本文出自 Ti ...
react 路由配置以及封装
react 路由配置以及封装 1.新建App.tsx文件 import React, { Component } from 'react' import IsRouter from './router ...
vue路由匹配实现包容性_简约设计，最大利润，包容性问题
vue路由匹配实现包容性最小? 最大化? 准确? 不,不,不. (Minimal? Maximal? Accurate? Nope Nope Nope.) Many directors and th ...
18. React路由
文章目录 1.React路由相关概念 1.1 SPA应用 1.2 路由Route的理解 1.2.1 什么是路由 1.2.2 路由Route的分类后端路由前端路由 1.3 react-router- ...
React 路由详解(超详细详解)
React React 路由对SPA的理解 1.单页Web应用(single page web application,SPA). 2.整个应用只有一个完整的页面. 3.点击页面中的链接不会刷新页面 ...
React 路由基础--React路由介绍
1.React路由介绍现代的前端应用大多都是 SPA(单页应用程序)single page application,也就是只有一个 HTML 页面的应用程序.因为它的用户体验更好.对服务器的压力更 ...

React 路由匹配模式

React 路由匹配模式相关推荐

最新文章

热门文章