在React路由器中，<Switch>和将'Exact‘放在'path’之前有什么区别？
在React Router中，<Switch>组件用于渲染与当前URL匹配的第一个子<Route>或<Redirect>
Switch
<Switch>组件会遍历其所有子路由，并仅渲染与当前URL完全匹配的第一个路由。如果没有找到匹配项，则不渲染任何内容。
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>在这个例子中，当用户访问根路径（"/"）时，将渲染Home组件。当访问"/about"或"/contact"时，将分别渲染About和Contact组件。
Exact
exact属性用于确保只有当URL与path完全匹配时，才渲染对应的组件。如果没有exact属性，那么带有子路径的路由将始终匹配其父路由。
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />在这个例子中，exact属性确保只有当用户访问根路径（"/"）时，才渲染Home组件。如果没有exact属性，当访问"/about"或"/contact"时，由于这些路径以"/"开头，Home组件也会被渲染。
总结
<Switch>用于确保仅渲染与当前URL匹配的第一个子路由。exact属性用于确保只有当URL与path完全匹配时，才渲染对应的组件。
通常，你会在<Switch>组件内部使用带有exact属性的<Route>组件，以确保正确的路由匹配。
相关·内容
1回答
我试着学习React路由器，并使用多个页面。我的页面结构如下所示。
|_Login
|_Main
|_Home
|_Agenda
|_Admin
|_Main
|_Settings
为此，我找到了一个例子，即worked
<Router>
<Switch>
<Route exact path="/"><LoginPage /></Route>
<Route path='/admin/:path?' exact>
浏览 2提问于2020-11-03得票数 0
我正在构建一个包含三个主要部分的web应用程序:实际网站、管理部分和用户部分。对于每个部分，我想要一个不同的布局包装。
这是我现在的代码：
网站包装器
const Website = () => (
<React.Fragment>
<NavigationBar />
<main>
<div className="container">
<Switch>
<Route exact path='/' component={Ho
浏览 1提问于2018-08-16得票数 7
回答已采纳
我正在尝试使用React路由器V4和新的React的上下文API。这是我的代码：
class App extends Component {
static propTypes = {
router: PropTypes.func.isRequired,
module: PropTypes.string.isRequired,
sideMenuConfig: PropTypes.string
};
render() {
let baseName = "/" + this.props.mod
浏览 0提问于2018-04-25得票数 1
回答已采纳
我试图理解使用路由器和在React路由器中切换之间的区别。
但我不明白为什么在下面的示例中使用Switch有效：
import { BrowserRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
浏览 8提问于2021-02-22得票数 8
我在使用react-router-dom更改react中的页面时遇到问题。这是我的路由器： import { Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from '../pages/grocery';
import Profile from '../pages/profile';
import CheckoutPage from '../pages/checkout';
export default function Route
浏览 11提问于2020-06-09得票数 2
我在使用这段代码时没有使用BrowserRouter组件包装Switch，它运行得很好。什么时候做了一些有趣的测试，我得到了下面的错误Invariant failed: Browser history needs a DOM，它说Link组件不能在路由器之外使用。实际上，我没有使用路由器。当我添加路由器时，url正在更改，但组件没有正确地重新生成。我做对了吗？
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
浏览 1提问于2022-01-28得票数 0
回答已采纳
1回答
我有一个在前端使用React和Django作为后端的项目。
此外，我在我的项目中使用了react路由器，代码如下所示：
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/teachers" exact component={Teachers} />
<Route path="/courses" exact component={
浏览 1提问于2018-09-26得票数 3
回答已采纳
1回答
我正在尝试在我的路径中设置一个自定义历史对象，以便能够使用它我的redux操作。我已经看到，我们应该使用<Router>从‘反应-路由器’，并设置历史对象在其中。我就是这么做的。
App.js
//** Import router */
import { Switch } from 'react-router-dom';
import { Router } from 'react-router';
import history from './hooks/useHistory';
const App = () => {
浏览 2提问于2021-10-20得票数 0
我只想在一些页面上传递一些上下文，但反应的方式-路由器是我无法找到如何做到这一点。例如，我希望AlertsProvider只对警报屏幕可用，GroupsProvider只对组屏幕可用，依此类推
我该怎么做？
下面是我现在的代码：
<React.StrictMode>
<GlobalStyle />
<BrowserRouter>
<AuthProvider>
<PropertiesProvider>
<BuyersProvider>
<AlertsPro
浏览 1提问于2020-10-29得票数 2
回答已采纳
我已经设置了React路由器v4，如下面代码部分所示。
<Router>
<Switch>
<Route exact path="/" component={HomePage}/>
<Route>
<Switch>
<Route exact path="/account" component={Account}/>
<Route exa
浏览 2提问于2020-04-10得票数 0
我有一个带有react路由器的App主组件：
function App() {
return (
<Router>
<NavBar />
<Switch>
<Route path="/screenings" exact component={SPT} />
<Route path="/registerpage" exact component={RegisterPage} />
<Route path="/
浏览 4提问于2020-02-11得票数 0
回答已采纳
1回答
如何将robots.txt文件放到路径www.domain.com/robots.txt上？不使用服务器，它的前端与反应路由器。
robots.txt ->根文件夹中./
app.js ->在src文件夹中。/src/
(...)
export class App extends React.Component {
render() {
return (
<div>
<Switch>
<Route exact path='/stuff' component={Stuff}/>
<
浏览 0提问于2019-03-13得票数 7
“router”："^17.0.2"，“router”："^17.0.2"，“react路由器-dom”："5.2.0"，
这是我的App.js文件
import React from "react"
import Navbar from "./components/Navbar"
import Main from "./components/Main"
import Details from "./components/Details"
import { BrowserRout
浏览 2提问于2022-01-13得票数 2
回答已采纳
我正在尝试使用来自react-router-dom的路由器的react-router-dom来验证用户是否进行了身份验证。我在登录还原器中保留身份验证。
初始国家：
const initialState = {
logged: false,
userName: null
}
在我的App.js里我有我的路由器
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
impo
浏览 4提问于2021-05-21得票数 0
回答已采纳
如何使用React路由器进行散列路由？
这样做很好：
return (
<div>
<div>
<Link to="/one">One</Link>
<Link to="/two">Two</Link>
</div>
<Switch>
<Route exact path="/one" component={One} />
浏览 0提问于2019-01-22得票数 2
我有我的反应路由器配置，定义如下
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from '../Home'
import AboutUs from '../containers/AboutUs'
const Router = () => (
<main>
<Switch>
<Route exact path='/' compo
浏览 2提问于2017-11-29得票数 1
1回答
我正在用反应性路由器做一个项目。
这是一个项目结构
main
- mainRouter.tsx
- programFolder
- ProgramMainComponent.tsx
- ProgramScheduleComponent.tsx
- ProgramDetailComponent.tsx
- programRouter.tsx
- serviceFolder
- ServiceMainComponent.tsx
- ServiceFAQComponent.tsx
- ServiceCusto
浏览 4提问于2019-12-13得票数 1
回答已采纳
当设置React路由器BrowserRouter路径时，一个或多个远离根目录的路径不能工作。例如：
<Route exact path="/portfolio/new" component={Portfolio} />
<Route exact path="/portfolio" component={Portfolio} />
“/portfolio”有效，但没有“/portfolio/new”
'/bio‘工作，但没有’/bio/新‘
有人以前见过这个吗？
除了添加第二个子目录'/portfolio/new‘之
浏览 0提问于2018-01-22得票数 0
1回答
我看过许多例子，说明在使用React时，您可以将V4组件封装在React提供的<Switch>组件中，也可以使用任何其他元素来包含路由(如<div>)。
这两种方法有什么区别？
示例：
<BrowserRouter>
<div>
<Route exact path="/login" component={LoginScreen} />
<Route path="/loading" component={LoadingScreen} />
</div>
&l
浏览 2提问于2017-11-29得票数 6
回答已采纳
我已经创建了React应用程序，并在我的应用程序中使用了react路由器。我在路由中使用了路由器仿真器。每当我尝试在本地访问时，它都可以正常工作，但是当我部署到apache服务器时，params链接就不能工作了。请帮帮我。
我的反应路由器代码：
<BrowserRouter basename="tryloka_stg_app">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path=
浏览 3提问于2021-03-25得票数 0
回答已采纳
1回答
React js组件在页面刷新和内部页面处于生产模式时不会呈现，但它使用相同的代码在开发模式下工作。
我正在使用React路由器V4，React js和Redux，Webpack。
class Router extends React.Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route
浏览 4提问于2018-02-22得票数 0
1回答
我试图在{title}位置显示来自react路由器的支持值，但我不知道是否可能。
如果路由器'/dashboard'，{title} =‘仪表板’，否则如果路由器'/payment'，{title} =‘支付’
class Header extends React.Component {
state = {
title: '',
};
render() {
const { title } = this.state;
return (
<Typography>
{title
浏览 0提问于2018-11-10得票数 0
回答已采纳
当我试图运行此命令时，会得到404错误。
serve -l build
在构建了一个react应用程序之后，这就是我的./app.js和在文件中实现的反应性路由器。
import React from "react";
import Header from "./Components/Header";
import LeafletContainer from "./container/LeafletContainer";
import SignUp from "./Components/SignUp";
import Profil
浏览 1提问于2021-03-15得票数 0
回答已采纳
我试图创建一个应用程序与反应路由器，但当我试图应用反应路由器，它立即停止显示所有的内容。我使用的是V5，所以开关应该工作，但它不工作
以下是代码：
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<>
<Router>
<Switch>
<Route exact path
浏览 16提问于2022-03-05得票数 0
1回答
我试图找到一个低级别动画的工作示例，使用React路由器v4和ReactiveTransformationGroupv2。我看过React路由器文档上的示例，但它们只使用了一条路径的CSS动画。
这就是我目前使用React路由器的方式：
export const App = () => (
<div className="app-container">
<main className="app-container__content">
<Switch>
<Route exac
浏览 0提问于2017-09-01得票数 1
我正在尝试使用react路由器和node js服务器来管理react应用程序。
我在react中的路由器：
<BrowserRouter>
<Switch>
<PrivateRoute token={token} Component={Payments} exact path="/payments"/>
<PrivateRoute token={token} Component={User} exact path="/user"/>
浏览 0提问于2018-09-14得票数 6
2回答
所以基本上，我遇到了react路由器没有渲染我的SystemSidebar的问题。我想滚动浏览我的SystemSidebar组件，但我的问题是，当我按下'LinkSoundIcon‘时，它会将我重定向到’新页面‘，但该页面不会呈现我的systemSidebar。我希望当我点击侧边栏的任何链接时，我的侧边栏保持不变。 import React from 'react'
import './SystemSidebar.css'
import SoundIcon from '@material-ui/icons/Computer';
impo
浏览 23提问于2020-09-29得票数 0
8回答
我正试图向vercel发布一个无服务器的网页。我想使用的反应路由器，这在我的电脑上工作很好，但当我部署它不工作，有人能帮助我吗？
(我想在没有服务器的情况下完成这项工作)
// My main code
import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import Main from './routes/Main'
import Tos from './routes/Tos'
import Priv
浏览 3提问于2020-11-13得票数 13
回答已采纳
1回答
我对反应路由器相当陌生..。我使用的是React路由器-dom 5.0.0
由于某些原因，我的仪表板路径不匹配，当我导航到/dashboard时没有呈现任何内容
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from './theme';
import { BrowserRout
浏览 0提问于2019-06-01得票数 0
回答已采纳
我正在尝试让我的react-router工作。到目前为止，我只有一些简单的路由，比如: /login，/logout，/admin。我的/admin路由下面有几个路由，比如/admin/users、/admin/groups 现在我想这样做，这样我就可以在这样的路由上呈现一个组件: /admin/groups/modify/:groupID。由于/admin/groups运行得很好，我想我可以写成/admin/groups/modify/:groupID，但它不是这样工作的。 那么为什么/admin/groups可以工作，而/admin/groups/modify/:groupID不行呢？是
浏览 20提问于2020-11-20得票数 0
回答已采纳
1回答
我测试我的反应应用程序，我有一个错误的所有链接反应路由器在我的看法。
Index.js
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
function App({props}) {
return (
<div>
<Navbar />
<Switch>
<Route path="/" exact component={Homepage} appProps={props}/>
浏览 2提问于2020-09-18得票数 2
1回答
我怎么解决这个问题？
、、、、
我使用了最近一次在终端上运行这段代码的version.Each，页面blank.What可能出错了，this.No控制台错误没有编译error.Just空白" React "；导入{ BrowserRouter作为路由器，路由，重定向，开关，}从“反应-路由器-多玛”；
import About from "./Pages/About/About";
import Contact from "./Pages/Contact/Contact";
import Home from "./Pages/Home/Home&#
浏览 6提问于2022-01-07得票数 -1
回答已采纳
我正在尝试用MemoryRouter测试一个组件，如带有初始条目设置的React路由器文档中所示，这样我就可以在包装的组件中有params了。
组件示例：
render () {
console.log(this.props.match.params.item)
}
在应用程式中(运作良好)：
<Router>
<Switch>
<Route exact path='/' render={() => (
<Redirect to={`/${guessLocale()}`} />
)} />
浏览 0提问于2018-07-03得票数 6
回答已采纳
我已经在我的React-Router中添加了CSSTransitionsGroup来创建页面过渡。现在，我想根据我点击的链接进行不同的转换。例如:我总是想使用“淡入淡出”，除非我点击了“工作”按钮，然后我想使用“滑动左”。我使用的是React -Router4，以及来自的普通React动画插件。
我的应用程序组件与我的路由器和转换如下所示：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'r
浏览 11提问于2017-06-22得票数 0
我正在致力于我的第一个流星/反应应用程序，我试图使用反应路由器。然而，当我试图运行应用程序时，我似乎无法导入renderRoutes函数。
我正试图跟随路由器部分在这里：
路由器生活在myapp/client/lib/router.js中。这是我的路由器代码：
import React from 'react';
import { Router, Route, Switch } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory'
浏览 0提问于2019-06-02得票数 0
回答已采纳
2回答
我试图只从路由页面中删除头组件。我如何在反应性路由器4中做到这一点？
这是我的路线
const AppRouter: any = () => (
<BrowserRouter>
<React.Fragment>
<Header />
<Switch>
<Route path={LOOP_MAIN_ROUTE} component={LandingPage} exact/>
<Route path={LOOP_
浏览 1提问于2018-11-12得票数 0
回答已采纳
这是我的路由器结构：
<Router>
<main className="py-3">
<Switch>
<Container>
<Route exact path="/admin" component={AdminScreen}></Route>
<Route path="/:campaignId" component={CampaignScreen}></R
浏览 9提问于2021-05-28得票数 0
回答已采纳
1回答
我已经将react路由器4插入我的react应用程序中，在运行npm run test时，我得到了以下错误：
Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
in Switch (at App.js:17)
in main (at App.js:16)
in div (at App.js:15)
in App (at App.test.js:7)
浏览 2提问于2017-10-02得票数 0
回答已采纳
我的应用程序有一个默认路由，它以dev模式在localhost/路径上加载组件localhost/。
但是当我从任何页面刷新应用程序时，主页就会显示出来，即使浏览器中的URL显示localhost/any/other/path。如果我在应用程序中手动导航到/any/other/path路径，浏览器的URL就变成了localhost/any/other/path/any/other/path。
就像路由器总是认为当前的路径是刷新时的/ 。
问题是什么？我用的是React 16和"react-router-dom": "5.1.2"。
我的路线如下：
<Pro
浏览 6提问于2020-09-02得票数 0
回答已采纳
1回答
我正在尝试排除我的react路由器的故障。它将转到一个空白页面，并且在命中路由时不会加载组件。我合并了一些代码，我认为它缺少react-router-dom，但我重新安装了它，它似乎被加载了。我的代码中也没有任何错误。我觉得这可能与历史记录或路由器有关，因为在PrivateMainLayout上，它会加载，但我必须刷新才能使其工作，直接urls也不会转到路由。下面是我登录的react路由器的代码，如果它有帮助的话：
import React, {Component} from 'react';
import {connect} from 'react-redux'
浏览 0提问于2018-04-04得票数 0
1回答
我想为用户添加专用路由器。并找到简单的解决方案与私有路由器组件，但类型记录返回我的类型错误。我试图添加任何类型，但这没有帮助。我怎么才能在这里添加类型？
Error:(18, 18) TS2322: Type '{ exact: true; path: string; component: typeof Main; }' is not assignable to type 'IntrinsicAttributes & Component<any, any, any>'.
Property 'exact' does not
浏览 0提问于2019-06-15得票数 2
1回答
我想使用钩子路由器在React中使用多个布局。
在正常的react-router-dom中，我使用路由内的路由来实现多布局效果。
这是我现有的react-router-dom代码，我想把它转换成hookrouter：
export default () =>
<Switch>
<Route exact path={[ Doctor_Login, Doctor_Panel , Reception_Login , Reception_Panel , Pharmacy_Login , "/"]}>
浏览 1提问于2019-09-04得票数 0
3回答
子域反应路由
、、、
我试图建立多用途的网站，以反应使用反应-路由器v5的路由。对于正常的路由，我们有如下的路线
本地主机:3000/posts本地主机:3000/图片库
但对于其他一些情况，我希望有子域名，比如博客。
blog.localhost:3000 //呈现博客组件
或
subdomain.localhost:3000 //呈现某些组件。
现在，这也呈现了与localhost相同的组件:3000。
有什么办法能让我做出反应吗？
目前的路线是这样的。
function App() {
return (
<React.Fragment>
<React.Sus
浏览 9提问于2020-05-26得票数 0
我已经实现了一个嵌套的反应路由器应用程序。在下面的路由结构大纲中，用(1)路由1,2,3很好。另外，当我登陆3时，它正确地显示了sidebar和组件(1)。当我单击组件(1)中的Link链接到(2)时，它无法工作。我在寻找类似的问题，但没有找到答案。你能告诉我我错过了什么吗？
// Outline for routing structure
App.js
L 1
L 2
L 3
L sidebar // link to (1), (2). This should be docked when rendering (1), (2)
L (1) // path:'/dashboar
浏览 2提问于2021-05-13得票数 1
回答已采纳
React路由器dom在/blogs/new上抛出了404，但如果我删除第二个url (如/blogs或任何其他单个/ url )，它就可以正常工作。 import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import HomePage from './HomePage';
import Blogs from './Blogs';
import NewBlog from './NewBlog
浏览 20提问于2020-08-17得票数 1
我有以下React组件：
function Routes(props) {
const { role, userId } = props;
const renderMemberTasksPage = (props) => {
//Redirects to 404 or not
};
const renderTracksPage = (props) => {
//Redirects to 404 or not
};
return (
<>
<Switch>
<Route
浏览 0提问于2020-05-05得票数 1
React路由器的
<Switch>的所有子元素都应该是<Route>或<Redirect>元素。将只呈现与当前位置匹配的第一个子节点。
尽管如此，嵌套的<Switch>语句仍然是允许的。我使用这个模式来分解大量的<Routes>
<Switch>
<Route path="/foo" component={FooRouter} />
<Route path="/bar" component={BarRouter} />
<Route pat
浏览 0提问于2018-04-02得票数 15
如何检查递归路径是否在反应性路由器中，此
import { Switch, Route, Redirect } from 'react-router-dom';
<Switch>
<Route exact path="/" component={SignIn} />
<Route path="/signup" component={SignUp} />
<Route path="/forget-password" component={ForgetPasswordP
浏览 0提问于2018-11-13得票数 0
回答已采纳
1回答
我正在尝试让我的反应代码显示。我跟踪了一个，我已经尽了一切努力让它显示出来。我读过关于反应路由器和开关的文章，但我真的找不到我的错误。
Switch和Router
<Switch>
<Route exact path="/">
<Products
products={products}
onAddToCart={handleAddToCart}
handleUpdateCartQty
/>
</Route>
浏览 7提问于2022-05-05得票数 0
我想创建可重用的路由组件
import React from 'react';
import { Route } from 'react-router-dom';
interface ITProffesion {
proffesion: string;
}
export const ITRoleRouter: React.FC<ITProffesion> = ({ proffesion }) => (
<Route exact path={`/${proffesion}`} key={proffesion}>
&
浏览 0提问于2021-01-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
