在React路由器中，<Switch>和将'Exact‘放在'path’之前有什么区别？
在React路由器中，<Switch>和将'Exact'放在'path'之前有以下区别：
- <Switch>组件：它是React路由器提供的一个高阶组件，用于确保只有一个路由能够匹配当前的URL。当URL与多个路由的路径匹配时，<Switch>组件将只渲染第一个匹配的路由组件，并忽略后续的匹配。这样可以避免多个路由同时渲染的问题。
- 'Exact'关键字：它是用于精确匹配路由路径的一个属性。当设置了'Exact'属性时，只有当URL与路径完全匹配时，才会渲染对应的路由组件。如果没有设置'Exact'属性，React路由器将会按照路径的前缀匹配规则，渲染所有与URL匹配的路由组件。
区别总结：
- <Switch>组件确保只有一个路由能够匹配当前的URL，避免多个路由同时渲染的问题。
- 'Exact'属性用于精确匹配路由路径，只有当URL与路径完全匹配时才会渲染对应的路由组件。
对于React路由器中的<Switch>和'Exact'的具体使用场景和示例，可以参考腾讯云的React路由器相关文档和示例代码：
- 腾讯云React路由器产品介绍：React 路由器
- React 路由器文档：React Router
- React 路由器示例代码：React Router Examples
相关·内容
1回答
在React路由器中，<Switch>和将'Exact‘放在'path’之前有什么区别？
javascript、reactjs
标题说明了一切，有什么不同？两者都匹配唯一的路径并呈现组件。
浏览 12提问于2020-03-06得票数 0
2回答
一个组件reactjs的嵌套路由
reactjs、react-router、react-redux
我在reactJs中是新手，我试图为一个组件执行嵌套路由，但是它没有按照我试图做的嵌套的方式工作，错误就发生在下面这样
<Provider store={store}> <div>
浏览 3提问于2018-01-12得票数 0
回答已采纳
3回答
React路由器似乎不再使用以前的方法了
reactjs
我以前在我的站点中使用路由器的方法似乎不再有效。下面是正在使用的代码片段。import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
<Route exact <em
浏览 17提问于2022-04-24得票数 6
2回答
React路由器和链接不呈现
javascript、node.js、reactjs、redux、render
我正在开发一个react应用程序，当url更改时，我发现我的页面没有呈现。请参阅下面的代码，我有一个带有三个Link的导航条，当我单击它们时，我可以看到地址栏中的url发生了变化，但是页面仍然保留在旧的url中。但是，如果刷新页面，则呈现和显示当前url的相应页。这是我的App.js的代码import Home from
浏览 3提问于2022-07-19得票数 0
1回答
为什么你不能从2个JSX元素渲染？
javascript、reactjs、react-router-dom
"react"; <Router> {/* <Route exact path="/logi
浏览 12提问于2020-08-27得票数 0
1回答
反应:哪一种顺序是用特殊的方式“包装”组件？
javascript、reactjs、wrapper、higher-order-components
</Provider>)如何在HOCs中使用和包装这些组件的一般顺序是什么，这是否可以与其他HOCs一起多次包装组件？
浏览 0提问于2019-08-01得票数 2
回答已采纳
6回答
React路由器链接不起作用
javascript、reactjs、redux、react-router、react-redux
React路由器链接似乎不适用于我的应用程序。好像我错过了基本的不起作用。我的链接组件将URL更新为be /products/singleproduct，但我的页面只是中断了.有人能告诉我如何解决这个问题吗？, { Component } from 'react';import ServicePage from>
浏览 2提问于2018-02-03得票数 3
2回答
反应路由器嵌套
react-router、react-router-dom、nested-routes
我试图在react路由器中使用嵌套路由。但我的巢穴不起作用了。如果这有区别的话，我用的是打字本。//This is working//This is not working
<Routepath={`${path}/:id`} component=
浏览 6提问于2020-12-20得票数 0
回答已采纳
10回答
反应-路由器只有一个孩子
javascript、reactjs、react-router
我不断地发现错误：
这是我的代码：import Editorstore from './components/baselayer';
import {BrowserRouter as Router, Route} from 'r
浏览 2提问于2017-03-24得票数 75
回答已采纳
2回答
在react中找到根路径时隐藏组件
reactjs、react-router、components、react-router-dom
我使用以下命令导入withRouter import { withRouter } from 'react-router-dom'; 在我的App.js文件中是这样的： const App = (props=='/' && <Navbar />} <Route path="/" comp
浏览 4提问于2020-08-19得票数 0
回答已采纳
5回答
React Router-DOM - Switch仅显示根路径
reactjs、react-router
问题是path "/"可以工作，path "/meow"不行，它不会显示任何错误。 <li> </li> <Switch>
<Route
浏览 12提问于2021-05-21得票数 0
1回答
React Router Dom当您在任何路由的任何subRoute中时，如何重定向到其他App.js路由
reactjs、hyperlink、react-router-dom、router
> <Route exact path="/auth/signin"component={Signin}/>
<Route exact path="/auth/signup"
浏览 4提问于2021-11-21得票数 0
3回答
React url更改，但组件只有在手动刷新后才会呈现
javascript、reactjs、react-router-dom
嗨，我是第一次接触react和路由器。问题是，当我点击一个链接时，顶部的URL会发生变化，这样我就可以知道发生了什么事情。但页面不会自动刷新，因此当我单击它时，新组件不会呈现。如果我在chrome中手动刷新页面，它将为链接呈现正确的组件。不确定为什么会发生这种情况。nodejs服务器和Mongodb的功能就是不刷新。我不确定这是否相关。 import React , {useState} from 'react';
import l
浏览 58提问于2020-10-19得票数 2
1回答
React-router - redirect on load？
reactjs、react-router、react-router-v4
我是React开发的新手，我不确定如何处理这个问题。;但它什么也不做，我认为Application.jsx中第一个示例中的路由器只是覆盖了它。我想我可能做错了什么，因为我觉得这是路由器最基本的事情之一，但我在文档中找不到任何答案和任何对我有帮助的东西。有什么提示吗？我希望localhost:3000/myApp/index.html在应用程序启动时将localhost:3000/d
浏览 0提问于2017-10-10得票数 3
回答已采纳
1回答
我可以在django项目中使用react路由器吗？
javascript、python、django、reactjs、react-router
我有一个在前端使用React和Django作为后端的项目。此外，我在我的项目中使用了react路由器，代码如下所示： <Switch> <Route path="/teachers
浏览 1提问于2018-09-26得票数 3
回答已采纳
11回答
不变冲突:不应在<Switch>之外使用<Router>
javascript、reactjs、react-router
我有一个我不知道如何解决的问题，我在运行npm测试时遇到了这个错误
</nav> <Route exact path='/' component={Home}></R
浏览 1提问于2018-05-29得票数 81
回答已采纳
3回答
反应路由使空白屏幕无法正确输出。
reactjs、react-hooks、react-router
我已经尝试从App.js文件中调用我的路由，但是这是不正常的。我试过很多次了，但是浏览器得到的是空白屏幕。我对js框架的反应是完全陌生的import React from 'react'; <div className="App"> <BrowserRouter>
浏览 10提问于2021-12-09得票数 1
回答已采纳
3回答
React中的404页在每页中呈现
reactjs、react-router
我有一个Route文件，其中包含多个如下所示的路由 <Switch> render={() => }
</React.Fragment></<
浏览 1提问于2019-02-11得票数 4
1回答
未使用react路由器v5呈现的组件
javascript、reactjs、frontend、react-router-dom、single-page-application
我目前在reactjs项目、仪表板网络应用程序中工作。我也是使用反应路由导航内容在网站上。当我单击侧边栏中的“仪表板”时，它会正确地显示内容。但是当我点击'Antrian‘内容或页面中的'Ke Form’。它不会呈现下一个组件。[！]我想改变页面中的内容。不仅仅是在侧边栏。以下是我从web应用程序获得的版本: react : 16 react路由器-dom: 5.3.0
浏览 10提问于2022-11-24得票数 2
回答已采纳
5回答
在反应性路由器中如何隐藏登录页面中的导航条
javascript、reactjs、react-router
我想把导航栏隐藏在登录页面中。这段代码是我的App.jsx文件的一部分。现在我也看不到主组件中的导航栏了。抱歉，我的英语太短了。如果你听不懂我的问题，你可以评论。null <Route exact path
浏览 2提问于2017-11-14得票数 40
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
