重定向至重新加载react-router-dom v5页上的'/‘
重定向至重新加载react-router-dom v5页上的'/'是指在使用react-router-dom版本5时，将页面重定向到根路径'/'并重新加载页面。
React Router是一个用于构建单页应用程序的库，它允许我们在React应用中实现路由功能。react-router-dom是React Router库的DOM绑定版本，用于在浏览器中进行路由管理。
在React Router v5中，可以使用<Redirect>组件来实现重定向。要将页面重定向到根路径'/'并重新加载页面，可以在需要进行重定向的组件中使用以下代码：
import { Redirect } from 'react-router-dom';
// 在组件的render方法中
render() {
return <Redirect to="/" />;
}上述代码将会在组件渲染时立即重定向到根路径'/'，并重新加载页面。
重定向的优势是可以在应用程序中实现页面的跳转和导航，提供更好的用户体验。它可以用于处理用户登录、权限验证、错误处理等场景。
在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来部署React应用，并使用腾讯云的负载均衡（CLB）来实现流量分发和高可用性。此外，腾讯云还提供了对象存储（COS）来存储静态资源文件，如图片、视频等。
以下是腾讯云相关产品的介绍链接地址：
请注意，以上答案仅针对腾讯云产品，不涉及其他云计算品牌商。
相关·内容
我正在尝试在react中重新加载同一页面。我尝试使用history.push，并从'react-router-dom‘重定向，但没有工作。有了window.location，我就失去了状态。
浏览 0提问于2019-05-03得票数 0
index.jsx import React from "react";
import ReactDOM from "react-dom";
import { Route, Router, Switch } from "react-router-dom";
import App from "./components/App.jsx";
import SearchResults from "./components/SearchResults.jsx";
import history from "./his
浏览 19提问于2020-08-14得票数 1
回答已采纳
我在控制台上发现错误，说我应该用路径包装我的子路由，所有的路线仍然用容器包装，即使我这样做了，错误仍然存在，产品还没有显示。如果再次删除路线，就连肚脐也不会显示出来。此外，我还得到这样的警告：“位置匹配的叶路由"/”没有元素。这意味着默认情况下它将呈现一个空值，从而生成一个“空”页。“
App.js：
import "./App.css";
import { Container } from "react-bootstrap";
import { BrowserRouter as Router, Route, Routes } from "rea
浏览 6提问于2022-11-13得票数 1
回答已采纳
我正在尝试建立一个聊天应用程序。当我使用反应性路由器时，我遇到了一些问题。
在这里，index.js文件：
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes } from "react-router-dom";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoo
浏览 4提问于2022-08-02得票数 0
回答已采纳
2回答
我是个反应新手。我试图设置路由器和渲染来改变页面，但是它给了我一些我无法理解的错误。
我在我的index.js中安装了终端index.js，我已经导入BrowserRouter并嵌入了我的应用程序。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
imp
浏览 9提问于2022-02-16得票数 2
回答已采纳
我的ASP.Net应用程序中有一个母版页。我在母版页中有一个菜单，它可以重定向到它自己的内容页。所有的页面都是从同一个主页派生出来的。每次从一个页面重定向到另一个页面时，都会加载母版页。有什么方法可以避免MasterPage在重定向发生后重新加载。
准确地说，我想知道我们能否防止Masterpage在Response.redirect上重新加载。
浏览 4提问于2011-09-06得票数 0
我正在学习routing，但是当我尝试使用BrowserRouter时，我得到了以下错误：
位于"/project“位置的匹配叶路径没有元素。这意味着它将在默认情况下呈现一个空值，从而生成一个“空”页。在应用程序中的配置文件(由App创建)的路由中(由配置文件创建)
PFA下面的代码。
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const
浏览 1提问于2022-05-13得票数 1
回答已采纳
在我的应用程序中，用户只有在登录后才能发布评论。因此，当用户点击评论活动时，他/她将被重定向到登录页面，成功登录后，他/她应该重定向到该活动。
在这种情况下，我使用了startactivityfor result()，但它再次显示页面正在加载。因此，当我单击back按钮(使用finish())时，它会再次显示同一页。
我只想加载页面一次。
有谁知道如何做到这一点吗？
浏览 0提问于2012-01-25得票数 0
回答已采纳
1回答
我在/customerOrders/13页面中，然后尝试使用navigate('/customerOrders/14')重定向到/customerOrders/14。即使更新了URL，页面也不会重定向到/customerOrders/14。
下面是我从代码库中提取的与此相关的代码片段。
App.js
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
...
<BrowserRouter>
<Routes>
<Route
浏览 1提问于2022-01-25得票数 7
回答已采纳
我想要的是当进入'/'路径时，它会呈现主页(App.js)，并创建一个特殊的链接来重定向到外部页面。
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import App from './App';
const Home = () => {
return (
<Routes>
<Route path="/" element={<A
浏览 0提问于2022-07-11得票数 0
回答已采纳
1回答
反应路由器呈现页面空白
、、、
我得到一个空白页与我的渲染。我签了其他类似的问题，以找到解决办法，但我仍然得到这个空白页。谢谢你的帮助!
这是我的密码：
App.js
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes } from 'react-r
浏览 1提问于2022-03-28得票数 0
1回答
/*，这是我的投资组合，我想在短视频后重定向到主页*/
//根据需要导入包
import './App.css';
import React from 'react';
import Vid from './assets/codingmonkeyvid.mp4'
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Secondary from './Sec
浏览 6提问于2022-06-12得票数 -1
我在主页上，所有东西都被分派并正常工作，当我进入显示详细信息的下一页时，当我使用react-router-dom <Link to='..'>返回主页时，useEffect不会触发，它不会将redux状态发送到空白页，如果我手动重新加载主页，它就会工作。那么，当我导航回主页时，如何确保useEffect重新呈现。当我从任何其他页面导航到主页或任何其他页面时，我都面临着同样的问题。
这是这两个文档的导航路线。
{/* Product Screen Design none Functionalities Complete% /}
<
浏览 21提问于2022-12-01得票数 0
2回答
我有一个reactJs应用程序，它运行在一个有nginx的服务器上。问题是，当我尝试从HomePage("/")重定向到/UserPanel或/AdminPanel时，url会更改，但它会显示一个空页面，但是当我重新加载页面时，它就会正常工作。这个问题在我的本地主机中没有发生，但是它发生在生产构建中。
这是我的nginx配置：
listen 80 default_server;
listen [::]:80 default_server;
root /var/app/html;
index in
浏览 3提问于2021-01-31得票数 2
回答已采纳
在GWT中有一些打开新页面或重定向页面的选项，我不知道哪一个是最好的？
-Option 1:将当前页重定向到新页，但不打开新选项卡。
String url = Window.Location.createUrlBuilder().setHash("!search").buildString();
Window.Location.assign(url);
-Option 2:在新选项卡上打开一个新页面。
String url = Window.Location.createUrlBuilder().setHash("!search").buildString();
浏览 4提问于2014-03-20得票数 0
回答已采纳
Hei，我试图建立一个简单的反应应用程序与导航功能。主要的主题是我有3个组件，应用程序、测试和AppShell。App组件是默认(初始)组件。我想要的是每次用户进入App时，我的应用程序都会重定向到Test 。
我面临的问题是，我的重定向只在我第一次加载应用程序时起作用，之后我的重定向就不起作用了。
我与索引页面一起分享了下面的三个组件代码！
索引页
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVita
浏览 3提问于2022-01-14得票数 2
回答已采纳
我有一个主选项卡(主页)，在那里所有的帖子都会显示出来，一旦点击帖子，它就会推送帖子详细信息页面： 在home.ts上： show_detail_page(id,title,content){
this.navCtrl.push(PostDetailPage, {
id: id,
title: title,
content: content
});
} 在Postdetailpage.ts上 back() {
this.viewCtrl.dismiss();
//this.navCtrl.pop(); a
浏览 27提问于2019-01-31得票数 1
1回答
我正在使用MERN堆栈创建一个航班预订网站。最终确认页面显示收据和机票。我想将用户重定向到主页上单击后退按钮，而在确认页上。我正在使用react-router-dom。
浏览 0提问于2020-08-11得票数 0
1回答
我从RAPR15.4升级到17.0.2
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.3.0",
我需要重定向到一个URL，但不能让它工作。这就是它过去的工作方式
在我的记录列表中，我有一个函数
renderRedirect = () => {
if (this.props.URL) {
retur
浏览 9提问于2021-12-14得票数 0
回答已采纳
我需要使用javascript/jquery重定向到一个页面。
我有一个带有jquery标签页的页面，在Settings标签页中，我有一个链接，可以在厚框中加载用户的一些首选项，更新后，我需要重新加载主页。
我正在使用location.href = "/User/Update/" + $('#UserId').val() + "#Settings";重定向/重新加载页面，但是页面没有重新加载。问题似乎是当我重定向到加载厚框的同一页面时。
如何使用jquery选项卡的location.href重定向。
浏览 0提问于2010-01-27得票数 0
回答已采纳
当试图从useNavigate导入react-router-dom时，我得到以下错误：
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
我的导入语句：
import { useNavigate } from 'react-router-dom';
浏览 3提问于2020-10-06得票数 12
回答已采纳
2回答
我使用的是react-router v6，我必须使用历史实例。 我已经使用以下命令安装了它 yarn add history react-router-dom@next 使用历史实例的一种方法是使用从v5 - useHistory -dom导入的路由器钩子 这段代码在v5上运行得很好，但在v6上就不行了 import { useHistory } from "react-router-dom";
const history = useHistory();
const onRedirectCallback = (appState) => {
histo
浏览 47提问于2020-08-26得票数 1
回答已采纳
在每次加载页面时，我都无法从会话中读取值。我必须检查母版页上的会话值是否为null，因为我需要在登录时显示用户的真实名称，这样我就不能只依赖于表单身份验证。
在每次页面加载时，我也会做同样的事情。
if (Session["Nome"] == null)
{
FormsAuthentication.RedirectToLoginPage();
}
我不知道为什么或者是否是由于加载缓慢，但是即使我仍然是认证的，我也会被重定向到登录，所以在某个时候会话是空的。我想知道是否有更好的方法在母版页上显示用户名(而不是用户名)，并在变量实际上为null时重定向到登录页。
浏览 0提问于2019-01-21得票数 1
回答已采纳
我试图实现一个防火墙身份验证我的web应用程序与反应。
登录/输出流程是这样的。
在登录页成功登录的用户，重定向到主页.当未经身份验证的用户访问主页时，重定向到登录页
确认用户从登录重定向到主页，在主页单击“注销”按钮的用户被重定向到登录页。
但是，问题是当经过身份验证的用户在主页重新加载页面时，用户被重定向到登录页，然后重定向到主页。
我认为通过身份验证的用户不会重定向到登录页面。
我怎样才能解决这个问题？
我的密码如下：
FirebaseContext.tsx
import * as React from "react";
import { createContext, u
浏览 6提问于2020-05-12得票数 0
回答已采纳
我对grails很陌生，并且正在用grails开发一个web应用程序。我已经为登录功能安装了springSecurity插件。但是初始登录页是springSecurity提供的是auth.gsp，我用自己的UI结构编辑了这个auth.gsp文件，如下所示
但是我想把这个auth.gsp作为索引页，它在应用程序启动时加载。如何将index.gsp重定向到auth.gsp。
浏览 4提问于2014-03-11得票数 4
回答已采纳
1回答
登录后，我需要导航回原始请求的URL。
例如，当用户未通过身份验证时，用户进入www.example.com/settings，它将导航到登录页www.example.com/login。
一旦通过身份验证，它应该自动导航回www.example.com/settings。
我最初使用react-router-dom v5的方法非常简单：
const PrivateRoute = ({ isLoggedIn, component: Component, ...rest }) => {
return (
<Route
{...rest}
rende
浏览 1提问于2021-12-15得票数 13
回答已采纳
1回答
我正在尝试让我的app.yaml文件发送URL，正如人们所期望的那样。目前，我的app.yaml文件如下所示：
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
# Serve php scripts.
- url: /(.+\.php)
script: \1
- url: /.*
script: main.php
这个可以正常工作。我转到一个URL，点击一个链接，它会重定向并正确加载页面。问题是当我试图访问一个不存在的.php文件时。它给了我一个警告和一堆错误。我
浏览 3提问于2014-01-12得票数 2
我们正在用dotnet编写一个带有Razor视图(纯后端堆栈)的项目。我们的计划是将每个视图移动到React，使用react-router-dom来处理客户机和服务器中的路由。
我们的想法是一页一页地移动，不要做大爆炸，因为这个项目已经在生产中了。
当我设置react-router-dom时，看起来每个页面都是在客户机上处理的，如果路由不在Router处理的路由中，则不会重新加载整个页面。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from
浏览 0提问于2019-08-07得票数 2
回答已采纳
我一直在尝试使用react-router-dom在ReactJS中创建一个重定向错误页面。此页将显示一个
错误
消息，然后使用来自react-router-dom的{ Redirect }重定向到主页。此重定向将在1.5秒后发生
我曾尝试使用setTimeOut函数来实现1.5秒的延迟，但结果与我预期的不同。我希望页面重定向到'/‘主页，但在浏览器中只显示数字"2“。
import React, {Component} from 'react';
import {Redirect} from 'react-router-dom';
cla
浏览 8提问于2019-07-21得票数 0
回答已采纳
我被困在这里好几天了
这里发生的是，每当我单击登录时，登录页面将呈现在欢迎页面的下方。同样的事情也发生在登记簿上
我想要实现的是，每当我点击登录按钮，登录页面应该只呈现，否则我将被重定向到登录页面。
import React from "react";
import Login from "./Login";
import Register from "./Register";
import { Link, Switch, Route } from "react-router-dom";
class Welcome extends
浏览 2提问于2022-02-03得票数 0
回答已采纳
2回答
在App.js中，我尝试了react-router-dom，但它返回空白页。我试图添加(exact)，我还添加了(Switch)，但是没有工作，还需要指出的是，我也用(element)替换了(component)，但是没有工作。
import React from "react";
import "./styles.css"
import Header from "./header";
import Footer from "./Footer";
import Apps from "./Apps";
import
浏览 7提问于2022-10-10得票数 -1
我必须为我的应用程序配置路由。我是在我当地的系统里做的。我使用的包是"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
回答已采纳
我正在使用react-router-dom实现我的reactjs应用程序的路由！但是我有一个问题，在这个问题中，我找不到任何工作解决方案滚动到顶部的页面改变。有人能帮我吗？
这是我的路由代码：
<BrowserRouter basename={basename}>
<Switch>
<MobilePage hasNav navType="primary" exact path={`/restaurant`} component={VendorList} />
浏览 1提问于2018-06-24得票数 3
回答已采纳
1回答
返回顶部按钮重定向到上一页
、、、、
我是AngularJS新手，我在两个不同页面的底部实现了两个返回顶部按钮，就像这样。
第一页：
<h1 id = "top">
..........
<a href="#top" target = "_self">Return to Top</a>
第二页：
<h1 id="top_second_page">
..........
<a href="#top_second_page" target = "_self&
浏览 0提问于2015-07-15得票数 0
有人能在这张图片上看到问题吗？
iframe基本上阻止了我的页面从点击到任何东西。它只发生在发展上。生产现场工作良好。它是在我使用react-markdown之后开始的。但他们说他们在图书馆里不使用iframe。
会是因为react-scripts吗？我最近更新了我的react, react-router-dom，但没有更新react-scripts，因为如果我更新为react script v5，可能会出现(与节点相关的)错误。
浏览 9提问于2022-01-24得票数 1
1回答
我在我的一个项目中有一个奇怪的要求，要求是- 1)在我的web应用程序的初始加载它应该加载初始页面(第一页)。2)如果用户下一次来，那么他应该被直接重定向到他之前离开的地方-我正在从API获取DROP阶段。3)当用户下一次来时，他会被重定向到之前删除的页面，但在按下back时，他可以被重定向到他离开的页面的前一页
到目前为止我所做的是-
我使用了react-router-dom进行路由，但是发生在我身上的事情是-
1)用户第一次来，他被重定向到第一个页面，通过检查API 2)当用户再次来时，他有一个DROP阶段(从API)，所以我将他重定向到DROP Page。3)当用户按下后退按钮(移动设备
浏览 0提问于2018-05-20得票数 0
3回答
我已经找到了重定向到外部链接的，它对我的一个页面起了作用。
但对于另一页，它不再有效，我不知道为什么。
redirect.jsx
import React from "react";
import { BrowserRouter, Route } from 'react-router-dom'
export default class Redirect extends React.Component {
render() {
return (
<Route path='/hello' com
浏览 2提问于2020-04-02得票数 0
1回答
这是我的App.js代码
import './App.css';
import Home from './Pages/Home';
import About from './Pages/About';
import Contact from './Pages/Contact';
import {BrowserRouter,Routes,Route ,Link} from 'react-router-dom';
function App() {
return (
<div>
&l
浏览 6提问于2022-10-26得票数 1
我正在尝试从‘react- useHistory -dom’导入路由器，但是，我得到这个错误:导入错误：'useHistory‘不是从'react-router-dom’导出的。
我也检查了其他答案，比如 this，但都没有用。我的package.json看起来像这样
我就是这样使用useHistory的，
import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router
浏览 81提问于2021-09-19得票数 4
1回答
我正在尝试从我的app.js实现一个动态路由。我有两页。HomePage.js和ReportPageLayout.js.
当我试图从HomePage导航到ReportPage时，取消了status=。
当我在浏览器中刷新页面时，数据将被获取和呈现.。
这是我的app.js文件
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from '.
浏览 6提问于2022-04-15得票数 2
我正在尝试使用JSX <Link />标记重定向页面。这是我的代码：
links.js：
<Link to="/kategoriler" className="nav-link">
categories
</Link>
App.js：
import React, {Component} from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Link } from
浏览 1提问于2020-08-10得票数 1
回答已采纳
3回答
登录后的当前登陆页面URL - 'www.website.com‘。但我希望在登录时将其重定向到"www.website.com/home“。因此，它必须重定向到家庭组件。
浏览 11提问于2022-02-13得票数 0
回答已采纳
我们正在用dotnet编写一个带有Razor视图(纯后端堆栈)的项目。我们的计划是将每个视图移动到React，使用react-router-dom来处理客户机和服务器中的路由。
我们的想法是一页一页地移动，不要做大爆炸，因为这个项目已经在生产中了。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
const history: History = createBrowserHistory({ basen
浏览 0提问于2019-08-08得票数 5
回答已采纳
1回答
我有一个问题的反应-路由器-多玛和提示。问题是没有找到Prompt' (imported as 'Prompt')。新版本有什么变化吗？
这是我的代码：
import React from 'react';
import '../styles/ContactPage.css';
import { Prompt } from 'react-router-dom';
class ContactPage extends React.Component {
state = {
value: '&#
浏览 2提问于2022-01-22得票数 -1
npm install react-router-dom与npm install --save react-router-dom命令的区别 我尝试了这两个命令，得到了相同的结果，所以我不能理解这些命令之间的实际工作差异
浏览 39提问于2019-08-28得票数 1
回答已采纳
我在尝试使用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 Redux教程，并设置了身份验证(部分)-我想添加一个重定向的身份验证。
我正在使用"react-router-dom": "^6.2.1",
在我的LoginForm.js中，我试图通过react-router-dom重定向使用Redirect
import React, { useState } from "react";
import { Link, Redirect } from "react-router-dom";
import { useDispatch, useSelector } from
浏览 7提问于2022-02-21得票数 0
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<h1>Welcome</h1>
<Header />
<Route path="/" component={Home} exact
浏览 2提问于2022-03-18得票数 1
由于从v5到v6.2的反应路由的变化，我的代码无法工作。你能帮我修改一下PrivateRoute.js的细节以符合v6.2的要求吗？
PrivateRoute.js；强文本
import React, { Component } from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
const Priva
浏览 1提问于2022-03-11得票数 0
我使用的是react路由器-dom v4.这是我的路由器代码片段。
import {BrowserRouter as Router, Route, BroswserHistory} from 'react-router-dom';
<Router>
<Main>
<route exact path="/" component={All}/>
...
<route path="/user/:id" component={User}/>
</Main>
</Router>
因此，
浏览 1提问于2017-10-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
