React Router 4警告：“已尝试重定向到您当前所在的同一路由”
React Router是一个用于构建单页应用的库，它提供了一种在React应用中实现路由功能的方式。React Router 4是React Router的第四个版本，它引入了一些新的特性和改进。
对于React Router 4警告：“已尝试重定向到您当前所在的同一路由”，这个警告通常出现在使用<Redirect>组件进行路由重定向时。它的意思是你正在尝试将用户重定向到当前正在访问的相同路由。
这个警告通常是由于路由配置或代码逻辑问题引起的。下面是一些可能导致这个警告的常见原因和解决方法：
- 路由配置错误：检查你的路由配置，确保没有重复的路由路径。如果你在多个地方定义了相同的路由路径，可能会导致重定向到相同的路由。
- 路由匹配逻辑问题：检查你的代码逻辑，确保在进行路由重定向之前，你已经正确地判断了当前路由是否需要重定向。可能是因为你的判断条件有误，导致在不需要重定向的情况下也进行了重定向。
- 使用了错误的重定向目标：检查你的重定向目标路径，确保它不是当前正在访问的相同路由。如果你错误地将重定向目标设置为当前路由，就会导致这个警告。
解决这个警告的方法取决于具体的情况。你可以通过检查路由配置和代码逻辑来排除问题，并确保正确地进行路由重定向。
腾讯云相关产品中，与React Router 4相关的推荐产品是腾讯云CDN加速服务。CDN加速服务可以帮助提升网站的访问速度和用户体验，特别适用于单页应用的静态资源加速。你可以通过腾讯云CDN加速服务来加速React应用的静态资源加载，提高用户访问速度。
腾讯云CDN加速服务的产品介绍和详细信息可以在以下链接中找到：
相关·内容
我目前正在做一个使用react，redux和firebase的next.js项目。当用户进入一个需要授权的页面时，如果他们没有通过身份验证，我会使用以下代码来重定向他们。 import React from 'react';
import Router from 'next/router';
import { firebase } from '../../firebase';
import * as routes from '../../constants/routes';
const withAuthorization =
浏览 11提问于2019-02-03得票数 0
我正处于使用Socket.io & React路由器开发一个基本的React即时聊天消息的最后阶段，以教会自己一些核心概念。
我一直在GitHub上使用这个项目作为参考：
这里有一个实时版本：
我正在使用Reacti-路由器将用户从连接页面(在其中，他们可以选择用户名和空间，然后将用户名和空间作为变量添加到URL )重定向到聊天页面。
即。使用用户名“john”加入“room1”的用户将被重定向到：
function App() {
return (
<div className="App">
<Router>
浏览 1提问于2022-11-20得票数 1
回答已采纳
我有一个react应用程序，我希望用户在登录时被重定向到'/dashboard'，而不是主路由'/'。我已经用'/login'路由实现了这一点，但是不能让它对'/' home路由执行同样的操作。
如有任何帮助或见解，将不胜感激。
偶尔在玩游戏时，我会从React得到无限循环错误
import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
impo
浏览 1提问于2021-08-26得票数 0
3回答
我使用react-router-dom进行路由，而且由于我也使用GitHub页面，所以我需要在Router.jsx中使用HashRouter，如下所示
import React from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import Customer from './Customer';
const MyRouter = () => (
浏览 0提问于2018-03-13得票数 6
我花了几天的时间试图弄清楚这个问题，但我不知道它会是什么。我已经测试过所有东西了。
我有一个ReactJS项目设置在本地，我有一个登录页面，然后重定向到一个页面，然后需要登录查看它们的几个页面。这一切都在本地运行得很好。当我将它推送到临时服务器上时，它的设置应该与我的环境完全一样，这是一个docker环境，然后这一项功能中断了:当您登录时，它不会将URL更改为"/"，它只是停留在"/login“上。页脚和页眉都会出现(它们只设置为在登录后显示)，所以我不确定为什么会出现这种情况。
我可以点击菜单链接并按照预期转到任何页面，这似乎只是自动重定向不起作用。
代码(删除不相关
浏览 1提问于2017-04-06得票数 1
1回答
我目前正在学习反应，现在我正试图在反应中实现重定向。我有一个名为logout.js的文件，它将用户重定向到另一个文件Mello.js。当URL在浏览器中更改为/Mello时，重定向是成功的，但是没有呈现相同的组件。我的logout.js文件是：
import React from 'react';
import axios from 'axios';
import {BrowserRouter as Router,Route,Switch,Redirect} from 'react-router-dom';
import Hello from &
浏览 2提问于2020-03-24得票数 1
回答已采纳
我正在尝试为我的应用程序构建一个仪表板视图，我正在使用redux来管理身份验证。因此，如果用户未通过身份验证，我希望将他们重定向到登录，否则重定向到主页。 我有一个CustomLayout和一个主页组件，登录组件，注册组件。 首先处理从app.js到routes.js的路由 这是我的App.js import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { connect } from "rea
浏览 12提问于2020-04-18得票数 0
当路由不匹配时，我想重定向到索引路由
route.js
<Route path={"/"} component={BulletinBoardApp}>
<IndexRoute component={BulletinBoardAppItems} />
<Route path={"savedMessages"} component={BulletinBoardAppItems} />
<Route path={"urgentMessages"} component={BulletinB
浏览 3提问于2017-02-09得票数 0
我为react-router定义了一些路由。
如果我不指定这些路由，我会在页面加载时收到警告：“警告: react-router Location "/Services”不匹配任何路由“，但我可能会遇到这种情况。
我不能忍受的是，当我在react-router复盖的url上，单击Back按钮返回到未复盖的url时，它不起作用。我只是再次看到这个错误，并且没有再次要求服务器提供未覆盖的url。
你知道如何让react路由器只覆盖部分站点吗？
浏览 0提问于2016-04-19得票数 0
我是react-native的初学者，正在尝试实现重定向，并在验证登录..etc后路由到另一个页面
我应该选择react-native-router-flux、react-router-native还是react-navigation，或者如何实现路由、重定向等功能。
浏览 2提问于2018-06-28得票数 5
回答已采纳
1回答
下面是vue.js2代码，当用户尝试使用凭据登录时，它应该重定向到仪表板视图，但是即使提供了正确的凭据，它也不会得到重定向:并表示无法路由到同一页面。 if (username && password) {
const payload = { username, password };
this.$store.dispatch(LOGIN,payload)
.then((resp)=>{
if(resp && resp.data.message==="Welcome" ) {
浏览 15提问于2020-06-27得票数 0
我对一些路由使用了登录保护(例如'/profile')。看起来像这样：
canActivate() {
if (this.user.islogin) return true;
this.router.navigate(['']);
}
如果用户没有登录，它会将用户重定向到主页，并尝试访问某些路由。它工作得很好。用户可以从任何页面注销。我希望我的应用程序有下一个行为:如果用户在'/profile‘页面上点击'logout'，他应该被canActivate()方法重定向到主页。但是这个方法在这种情况下不会被调用。如何运行can
浏览 1提问于2016-11-02得票数 7
我是新来React的，我有以下应用程序：(index.js)
import ReactDOM from 'react-dom'
import {Component} from 'react';
import './style.css'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Header from './components/Header'
import Bo
浏览 14提问于2021-02-16得票数 2
回答已采纳
我正在尝试制作以下React：
App.tsx
|__ Router -> '/' => MainComponent
MainComponent.tsx
|__ Route -> '/comp1/child1' => Child1
|__ Route -> '/subcomp2' => SubComponent2
SubComponent2.tsx
|__ Route -> '/subcomp2/child1' => Child1
|__ Route -> '/su
浏览 2提问于2021-03-10得票数 1
回答已采纳
我正在尝试将路径存储到我的应用程序的状态中，因此如果用户没有登录并在登录后被重定向到/login，则可以将其定向到正确的路径。
例如: Path = /posts/my-new post
我实际上得到的是posts/[pid]，当我试图重定向到它时，它显然是不起作用的。
import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'
function App() {
const router = useRouter()
const [startUrl
浏览 7提问于2022-03-09得票数 0
2回答
我试着做一个海军酒吧，但并不是重定向到给定的页面。如果我单击Navbar中的任何链接，它将更改url栏中的路径，但不会重定向到该页面。我不确定我是不是错过了什么。当我用标签代替它时，它工作得很完美。
Navbar.js
import React from "react";
import { BrowserRouter as Router, Link, Switch } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<Switch
浏览 3提问于2020-05-25得票数 0
回答已采纳
我正在尝试用两个页面( one和two )创建一个小型演示应用程序。用户可以通过按一个按钮从页面one导航到页面two，但只有在第二个页面中的location对象的状态包含key属性的情况下才能导航。如果没有，则将用户重定向到one。
我遇到的问题是，当使用从one重定向并将状态传递给two时，React警告：
您试图重定向到当前正在运行的同一条路线："/“
这对我来说没有意义，因为我试图将用户从/one重定向到/two，而不是将/重定向到/two。
App.js
import React, { Component } from 'react';
import
浏览 0提问于2018-09-15得票数 0
回答已采纳
我正在尝试测试一个React组件，它需要将react路由器与app.js分开。
我有一个组件，可以使用Router.Navigation重定向，如下所示：
var React = require('react'),
Router = require('react-router');
var Searchbar = React.createClass({
mixins : [Router.Navigation],
searchTerm: function(e) {
if (e.keyCode !== 13) {
retur
浏览 5提问于2015-05-14得票数 10
回答已采纳
我有这样的反应路由器4：
<Route exact path="/" children={({match}) => (
<TransitionGroup component={firstChild}>
{match && <Home match={match} />}
</TransitionGroup>
)}/>
<Route exact path="/idea/:id" children={({match}) =>
浏览 0提问于2018-03-07得票数 0
回答已采纳
我正在尝试理解在使用React Router时看到的特定警告背后的细微差别。我试图根据用户是否登录来设置条件路由。我的代码如下：
// AppRoutes.js
export const AppRoutes = ({ machine }) => {
const [state] = useMachine(machine);
let routes;
if (state.matches('authenticated')) {
routes = (
<React.Fragment>
<Route exa
浏览 0提问于2021-03-04得票数 6
请注意，如何作出反应的最佳方式是：
提交表格(及.)
重定向到另一页(和..)
这里有一些原产的道具吗？
我发现了两种可能的重定向方法：
资料来源：
( 1)使用React路由器：history.push()
2)使用React路由器：<Redirect />
1)使用history.push()：重定向工作，但我不知道如何向重定向页面添加自定义道具。
2)使用<Redirect />：添加自定义道具工作(以这种方式)：
<Redirect to={{ pathname: '/products', state: { id: &
浏览 4提问于2019-01-24得票数 0
3回答
反应路由器重定向错误行为
、、、
我在我的reactjs应用程序中使用了反应性路由器-dom，在我的路由的末尾有这个块来重定向所有错误的路径到这个：
<Router>
<React.Suspense fallback={loading}>
<Switch>
//...all my routes...
//at the end of my routes I have this
<Route path="*">
<Redirect to="/dashboard" />
</Route>
浏览 17提问于2022-01-21得票数 2
3回答
我有一个react应用程序，其中包含一些使用react-router-dom的路由。我正确地描述了我的路由，然后我写道，当url是/**/重定向到404页面时，这是我的路由：
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
// my other routes
<Route path="/404" component={NotFoundPage} />
浏览 15提问于2021-02-15得票数 0
2回答
我正在使用react-redux，目前我的全局状态中有一个bool isAuthenticated属性，如果是这样的话，它将重定向到/home组件。
是否有更好的方法来解决我所实现的方法？如何解决输出错误？
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "./actions";
import { useHistory } from "react-r
浏览 1提问于2020-08-26得票数 0
回答已采纳
将最新版本的React-Router-Redux与最新版本的React-Router-Dom和React-Router一起使用时，推送派单在特定情况下不起作用。以下是详细信息：
版本："react-redux"："^5.0.7"，" react-router -dom"："^4.2.2"，react-router "^4.2.0"，"react-router-redux"："^5.0.0-alpha.9"，
重现步骤:根据React-Router-Redux版本5代码库中的示例设置代
浏览 2提问于2018-03-02得票数 0
我想重定向一个页面时，用户按下链接，它应该重定向该页面，但当用户被重定向时，链接按钮仍然留在那里，只有新的页面组件在那里打印。
下面是App.js的代码：
import React, { Component } from 'react';
import {BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom';
import AboutUs from '/Users/yashchoksi/Documents/test/src/AboutUs.js';
class
浏览 3提问于2018-02-22得票数 0
3回答
我将我的react应用程序部署到strapi中的/public目录中，一切正常工作，但是当我刷新页面时，strapi覆盖了我的react-router路由。
所以..。当我使用特定的路由时，如何将strapi重定向到打开公共目录？
例如，将/posts重定向到公共目录？
浏览 0提问于2019-03-10得票数 3
回答已采纳
2回答
我正在制作一个通用的redux应用程序，如果用户请求一个不存在的url，用户将被重定向到404路由，但是我有一个，如果您单击back按钮，它不会让您返回。
有没有一种不改变url就可以重定向到404路由的方法？
以下是我的路线：
export default (
<Route path="/" component={App}>
<IndexRoute component={MainPage} />
<Route path="venues/:venueName" component={Venue
浏览 2提问于2016-10-13得票数 3
回答已采纳
我使用的是，它与react-router 4.x兼容。
我的应用程序有两个页面：/login和/home。
我尝试将页面重定向到/login，如果用户访问一个不存在的页面。这是我的代码
import { Route, Redirect } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';
ReactDOM.render(
<Provider store={store}>
<Co
浏览 3提问于2017-07-30得票数 3
回答已采纳
8回答
我想在我的react/react-router/flux应用程序中构建一个Facebook登录。我在登录事件上注册了一个侦听器，如果用户登录，我希望将其重定向到'/dashboard'。我怎么能做到这一点呢？location.push没有很好地工作，除非在重新加载完页面之后。
浏览 17提问于2015-04-12得票数 51
回答已采纳
我正在尝试使用react-router-dom，但是我不能理解如何定义一个“主”容器来打开里面的所有其他组件？在旧版本中，我经常这样做
<Router history={history}>
<Route path="/" component={Main}>
<IndexRoute component={ShowsPage} />
<Route path="/shows" component={ShowsPage} />
<Route path="/ti
浏览 10提问于2017-08-28得票数 2
回答已采纳
我正在使用包对web应用程序中的用户进行身份验证。我已将react-router-dom路由设置为要求身份验证：
import React from 'react';
import { Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import authentication from 'react-azure-adb2c';
import Home from '../Home';
import Products from '../Prod
浏览 3提问于2020-11-03得票数 3
以下内容不起作用: React路由器"Link“不工作。
假设我们处于起点：“localhost:3000/api/page”。
当我单击下拉项目时，链接是：“localhost:3000/api/page/api/page/abc”。
它应该是："localhost:3000/api/pages/abc".
我在控制台中没有显示错误，但是它没有达到所需的行为。它没有重定向到正确的页面。
**当我通过输入URL进入正确的页面时，它是空的。
但是，在测试页面时，当我没有使用任何Reactive路由器路由时，页面运行良好，所以我认为问题在于路由**。
import { L
浏览 2提问于2021-06-07得票数 0
回答已采纳
2回答
下面是使用swtich的react-router。当我打开一个新选项卡并进入任何路径时，它总是重定向到/login。如果我删除底部开关(没有路径-默认)，它可以正常工作。如果我导航到已经加载了react应用程序(即从/login)的任何路径，它就会像预期的那样工作。
为什么开关没有检测到正确的路径，显然只有在第一次加载时，才包括游标符？
编辑:为了清晰起见，这是使用hashRouter on localhost，react-router-dom v5.2
<Switch>
<div className="loginForm align-middle&#
浏览 4提问于2021-12-30得票数 2
回答已采纳
我必须为我的应用程序配置路由。我是在我当地的系统里做的。我使用的包是"react-router": "^4.3.1"、"react-router-dom": "^4.3.1"、"history": "^4.7.2"和"connected-react-router": "^4.3.0"。
当用户导航到http://localhost:xxxx/login时，我希望用户被重定向到http://localhost:xxxx。在prod上的实际场景中，baseUrl应该从wi
浏览 1提问于2018-12-01得票数 0
回答已采纳
2回答
这个问题把我逼疯了，我得到了一个由create-react-app创建的简单的应用程序，我正在使用React-Router。
联署材料X：
<Router>
<Route path="/pages/:pageId" component={Page} />
</Router>
在Page中，我在componentDidMount上有一个fetch，它在第一次加载路由时正常工作。
例如，我访问：/pages/13，然后它获取页面数据，但是当我打开：/pages/13，然后单击一个链接组件(从React-Router导入)，将我重定向到：/
浏览 1提问于2018-04-27得票数 3
回答已采纳
我的应用程序是ES6反应应用程序与反应路由器。我想将用户重定向到一个小延迟后的另一个页面。这是我的反应组件：
import React from 'react'
import { Navigation } from 'react-router'
export default class Component extends React.Component {
render () {
return (
<div>Component content</div>
)
}
浏览 5提问于2015-11-09得票数 6
回答已采纳
1回答
提交成功后重定向到其他路由
、、、、
我使用redux-form和react-router。Redux-form提供了一个名为onSubmitSuccess的方法，在成功提交后会调用该方法。但是，我不能通过该方法访问路由器。
提交成功后，如何使用react-router重定向到新路由？
浏览 12提问于2016-09-22得票数 1
回答已采纳
2回答
我试图遵循这个反应路由器重定向，以便我可以重定向使用推送(‘/’)在我的组件或行动。
教程：
我不知道我错过了什么，但我得到了一个错误。
我在chrome控制台中遇到的错误是：
bundle.js:3090警告: React.createElement: type无效--需要一个字符串(用于内置组件)或一个类/函数(用于复合组件)，但got: undefined。您可能忘记从定义在其中的文件中导出组件，或者您可能混淆了默认导入和命名导入。
检查Root的呈现方法。在根printWarning @ bundle.js:3090中
bundle.js:2684未定义错误:元素类型无效:预期为字符
浏览 0提问于2018-02-25得票数 14
3回答
我不想知道。可以将路由器重定向到redux reducer中的某些组件吗？ 例如： case SUCCESS:
return { ...state, loading: false, push('/some')}; 我使用了react-router，react-router-redux。
浏览 44提问于2019-08-07得票数 0
我刚接触react & react router dom v5，而且我的英语也很差。提前感谢您的帮助。
我的问题:我的App.js路由中有两个主要路由
import { Suspense } from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
/* Pges */
import AdminContainer from './Pages/Admin/AdminContainer';
import PublicContai
浏览 4提问于2021-11-21得票数 0
1回答
嗨伙计们我有麻烦了。当我输入“仪表板”(这是一条私有路由)时，它会首先将我重定向到“登录”，然后重定向到仪表板。真和假在一起玩。我如何修正它不重定向我登录，然后到仪表板。
视频示例：
代码：
import React, {
useState,
useEffect
} from "react"
import { toast } from "react-toastify"
import {
BrowserRouter as Router,
Routes,
Route,
Navigate
} from "react-router-d
浏览 4提问于2022-02-01得票数 1
回答已采纳
我们将用react-router-dom的HashRouter替换BrowserRouter，并希望将旧的路线重定向到新的路线。我标记了nginx，因为我不介意重定向到那里。:)
因此，假设我们有一个旧的路径/#/users和/#/users:id：它们应该匹配并重定向到/users和/users/:id。
到目前为止，我尝试过(react-router-dom v5.0.1)：
<Router>
<Switch>
<Route path='/users' component={UsersComponent} />
<
浏览 0提问于2019-07-11得票数 6
回答已采纳
1回答
我想有一个用/recordings访问的录音列表的页面。通过单击任何录音，我希望被重定向到该录音的页面/recording/:recordingId。
我有以下使用‘react-router’建立的路由：
<Route path="recordings" component={RecordingList}/>
<Route path="recording/:recordingId" component={Recording}/>
<
浏览 1提问于2016-05-24得票数 0
我做了一个快速测试，看起来像这样： <Router>
<Switch>
<Route path="/foo" render={ () => <TestComponent key="test" data="1" /> } />
<Route path="/bar" render={ () => <TestComponent key="test" data="2" /> } />
</sw
浏览 46提问于2020-09-12得票数 0
回答已采纳
我在尝试使用react-router-dom的Redirect进行重定向时遇到问题。重定向后，尽管地址栏中的url是正确的，但不会加载任何内容。它只会在我刷新页面后加载。 我使用了一个定制的路由组件，因为我需要一个isPrivate属性来告知何时对页面的访问受到限制，以便进行重定向。 这是我的src/routes/index.js： import React from 'react';
import { Switch } from 'react-router-dom';
import Route from './Route';
import
浏览 20提问于2020-06-24得票数 1
回答已采纳
我的react-router-dom版本是4.3.1，下面是我的代码：
import React from 'react';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import Layout from '../../pages/Layout';
import Home from '../../pages/Home';
import BoatsManager from '../../pages/BoatsMa
浏览 2提问于2018-08-17得票数 3
1回答
实际上，我想做的事情很简单，但我猜还不够简单。我试图在传递静态参数时从一个页面重定向到另一个页面。
示例：
/learn => / with ?source=ABC123
我正在尝试使用以下代码来完成此操作：
<Route path="/" component={App}>
<IndexRoute component={HomePage}/>
<Redirect from="/learn" to="/?source=ABC123" />
</Route>
重定向是有效的，但是，直到您刷
浏览 0提问于2017-10-20得票数 1
我想将所有其他url重定向到默认的basename url:例如：
<Router basename="test">
<Routes>
......
</Route>
</Router>
如果我点击了url /any，它应该重定向到/test，如何在react路由器中配置它，我知道默认路由不是一个选项，因为在本例中url不是以/test开始的？
浏览 3提问于2022-09-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
