React 使用 Redirect 进行重定向时浏览器报错问题

最新推荐文章于 2024-02-29 10:18:40 发布

皮的狠

最新推荐文章于 2024-02-29 10:18:40 发布

阅读量4.9k

点赞数 1

分类专栏： React 文章标签： React 使用Redirect重定向浏览器报错问题

本文链接：https://blog.csdn.net/qq_41709082/article/details/86626639

版权

React 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

React 使用 Redirect 进行重定向时浏览器报错问题

1.我们在项目中有非常多的地方需要使用路由的重定向，这个时候就要使用到 Redirect组件进行路由重定向。但是使用的时候会发现，浏览器会报错：: You tried to redirect to the same route you’re currently on: “/home” 类似这样的错误。但是还是能达到效果，就是会有一个报错信息。下面来解决这个错误

原写法：
		<div className="Home">
				<h3>主页</h3>
				<div className="Home-nav">
					{
					   this.state.msg.map((item,index)=>{
						   return (<Link key={index} to={item.url} className={this.state.Index===index? "Home-nav-item active-nav-item" : "Home-nav-item"} onClick={()=>{this.changeIndex(index)}} >{item.title}</Link>)
					   })
				   }
				</div>
				<div>
						<Route path="/alibaba" exact component={Alibaba} />
						<Redirect  from='/' to={'/alibaba'}  />
				</div>
			</div>

希望页面一进去就默认跳转到 Alibaba组件。这样写就会有上述的错误报出。
解决写法：

			<div className="Home">
				<h3>主页</h3>
				<div className="Home-nav">
					{
					   this.state.msg.map((item,index)=>{
						   return (<Link key={index} to={item.url} className={this.state.Index===index? "Home-nav-item active-nav-item" : "Home-nav-item"} onClick={()=>{this.changeIndex(index)}} >{item.title}</Link>)
					   })
				   }
				</div>
				<div>
					<Switch>
						<Route path="/alibaba" exact component={Alibaba} />
						<Redirect  from='/' to={'/alibaba'}  />
					</Switch>
				</div>
			</div>

将route组件都放入switch内并且将redirect组件放到最后，这样就不会报错了。