React Router V4 - 警告：您尝试重定向到当前所在的同一路由：“homedashboard”

React Router是一个用于在React应用中实现路由功能的库。它提供了一种简单而强大的方式来管理应用的不同页面之间的导航和跳转。然而，在使用React Router时，有时候会遇到一些警告信息，比如警告提示“您尝试重定向到当前所在的同一路由”。本文将探讨这个警告的含义，并提供一些案例代码来解决这个问题。

在React Router V4中，通过使用``组件可以实现页面的重定向。当我们尝试将用户重定向到当前所在的同一路由时，React Router会给出一个警告。这个警告的目的是防止出现无限循环的重定向，导致应用陷入死循环。

在解决这个问题之前，让我们先来看一个简单的例子。假设我们有一个基于React的电子商务网站，其中包含一个购物车页面。当用户点击“继续购物”按钮时，我们希望将其重定向回首页。我们可以使用如下的代码实现这个功能：

jsx
import React from 'react';
import { Redirect } from 'react-router-dom';
class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirectToHome: false
    };
  }
  handleContinueShopping = () => {
    this.setState({ redirectToHome: true });
  }
  render() {
    if (this.state.redirectToHome) {
      return ;
    }
    return (
      
        Shopping Cart
        {/* 购物车内容 */}
        
      
    );
  }
}
export default ShoppingCart;

在上面的例子中，我们定义了一个`ShoppingCart`组件，其中包含一个按钮用于继续购物。当用户点击这个按钮时，我们将`redirectToHome`状态设置为`true`，然后使用``组件将用户重定向到首页。

然而，当用户已经在首页时，点击继续购物按钮会触发这个警告：“您尝试重定向到当前所在的同一路由”。这是因为我们尝试将用户重定向到当前已经在的路由`/home`，这样会导致无限循环的重定向。

为了解决这个问题，我们可以在重定向之前先检查用户当前所在的路由是否已经是目标路由。如果是的话，我们可以选择不进行重定向。下面是更新后的代码：

jsx
import React from 'react';
import { Redirect } from 'react-router-dom';
class ShoppingCart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      redirectToHome: false
    };
  }
  handleContinueShopping = () => {
    if (this.props.location.pathname !== '/home') {
      this.setState({ redirectToHome: true });
    }
  }
  render() {
    if (this.state.redirectToHome) {
      return ;
    }
    return (
      
        Shopping Cart
        {/* 购物车内容 */}
        
      
    );
  }
}
export default ShoppingCart;

通过在`handleContinueShopping`方法中添加一个条件判断，我们可以避免将用户重定向到当前所在的路由。这样就可以解决警告问题，确保应用的正常运行。

在使用React Router V4时，当尝试将用户重定向到当前所在的同一路由时，会出现警告。这个警告的目的是防止无限循环的重定向。为了解决这个问题，我们可以在重定向之前先检查用户当前所在的路由是否已经是目标路由，然后选择是否进行重定向。通过这种方式，我们可以避免警告，并确保应用的正常运行。

上一篇：React router v4 - 如何访问通过重定向传递的状态下一篇：React Router v4 NavLink 与 Link 的优点

=

React Router v4 NavLink 与 Link 的优点: 　　　　React Router是一个用于构建单页应用程序的流行库。它提供了一种方便的方式来管理应用程序中的路由，使得用户可以在不刷新整个页面的情况下浏览不同的视图。在React Router...... ...
React Router V4 - 警告：您尝试重定向到当前所在的同一路由：“homedashboard”: 　　　　React Router是一个用于在React应用中实现路由功能的库。它提供了一种简单而强大的方式来管理应用的不同页面之间的导航和跳转。然而，在使用React Router时，有时候会遇到一...... ...
React router v4 - 如何访问通过重定向传递的状态: 　　　　React Router v4 - 如何访问通过重定向传递的状态？React Router是一个用于构建单页应用的流行路由库。它提供了一种方便的方式来管理URL和组件之间的映射关系。在React Rou...... ...
React Router v4 - 切换组件时保持滚动位置: 　　　　使用React Router v4时，切换组件时保持滚动位置是一个常见的需求。在默认情况下，当切换到新的组件时，页面会回到顶部，这可能会给用户带来不便。但是，我们可以通过一些简...... ...
React Router v2.4 { queryKey false } 不再有效: 　　　　React Router是一个用于构建React应用程序中路由的库。它允许我们在应用程序中定义不同的URL路径，并将这些路径映射到不同的组件。这样，当用户在应用程序中导航时，React ...... ...
React Router Switch 和确切路径: 　　　　React Router Switch 是 React Router 库中的一个组件，用于在给定的路径下渲染第一个与当前位置匹配的子元素。它提供了一种简便的方式来定义路由规则，并根据当前 URL 进行...... ...
React Router Redirect 丢弃参数: 　　　　使用React Router Redirect组件可以实现页面重定向的功能。在某些情况下，我们可能希望在重定向时丢弃一些参数，以确保新页面的状态是干净的。本文将介绍如何使用React Rou...... ...
React router Link 不会导致组件在嵌套路由内更新: 　　　　在使用React开发Web应用程序时，我们经常会使用React Router库来处理页面路由和导航。React Router提供了一种简单而强大的方式来管理多个页面之间的切换和交互。其中一个核...... ...
React Router Lazy 组件不起作用: 　　　　React Router是一个流行的用于构建单页面应用的库。它提供了一种简单而强大的方式来处理应用程序的导航和路由。通过使用React Router，我们可以轻松地创建多个页面和链接它...... ...
React Router DOM — 如何在每个页面上包含导航栏: 　　　　React Router DOM是React官方提供的用于处理前端路由的库。它可以帮助我们实现单页应用程序中的页面跳转和导航功能。在每个页面中包含导航栏是一个常见的需求，本文将介绍如...... ...
React Router Dom v6 显示索引和其他子路由处于活动状态: 　　　　React Router Dom是React的一种常用的路由库，用于实现页面之间的导航和路由跳转。在React Router Dom v6中，我们可以很方便地显示索引和其他子路由处于活动状态。显示索引...... ...
React router 6、使用Navigate如何获取路径名: 　　　　在React开发中，React Router是一个常用的路由库，它可以帮助我们实现页面之间的导航和路径管理。而在最新的React Router 6版本中，我们可以使用Navigate组件来进行页面导航...... ...
React Router 6 和 Typescript - 索引属性类型“true”不可分配给类型“false”不明确的'。: 　　　　使用React Router 6和Typescript构建应用程序时，可能会遇到索引属性类型错误的问题。在使用React Router 6时，我们经常需要在路由配置中为特定的路由添加一些额外的属性。...... ...
React Router 4.x - 连接到 Redux 后 PrivateRoute 不工作: 　　　　React Router 4.x 连接到 Redux 后 PrivateRoute 不工作最近，在使用 React Router 4.x 和 Redux 构建一个 React 应用时，我遇到了一个问题。我尝试创建一个私有路由（Priv...... ...
React Router 4 的默认路由: 　　　　React Router 4 是一个用于 React 应用程序的流行的路由库。它提供了一种简单而强大的方式来管理应用程序的不同页面之间的导航。React Router 4 的默认路由使得在应用程序中...... ...