有没有办法在react重定向到其他url之前获取url？
在React中，可以使用react-router-dom库来实现重定向到其他URL之前获取URL的功能。具体步骤如下：
- 首先，确保已经安装了
react-router-dom库。可以使用以下命令进行安装：
npm install react-router-dom- 在需要进行重定向的组件中，引入
Redirect组件和useLocation钩子函数：
import { Redirect, useLocation } from 'react-router-dom';- 在组件中使用
useLocation钩子函数来获取当前URL：
const location = useLocation();
const currentUrl = location.pathname;- 根据需要进行重定向操作。例如，如果要在重定向之前获取URL并将用户重定向到
/other-url，可以使用以下代码：
if (shouldRedirect) {
return <Redirect to="/other-url" />;
}完整示例代码如下：
import React from 'react';
import { Redirect, useLocation } from 'react-router-dom';
const MyComponent = () => {
const location = useLocation();
const currentUrl = location.pathname;
// 根据需要进行重定向操作
if (shouldRedirect) {
return <Redirect to="/other-url" />;
}
// 组件的其余部分
return (
<div>
{/* 组件内容 */}
</div>
);
};
export default MyComponent;这样，在React中就可以在重定向到其他URL之前获取当前URL了。请注意，上述示例中的shouldRedirect是一个条件，根据具体需求进行设置。
相关·内容
2回答
如何在自定义文件中使用useLocation钩子来响应js？
javascript、reactjs、react-hooks
我有一个单独的文件，在这个文件中，我将常用的函数放在我的react项目中，名为MyFunctions.js。在这个文件中，我想使用useLocation钩子获取当前路径名+当前url的查询字符串。但它给出了一个错误
React Hook "useLocation" is called in function "getCurrentURL" that is neither a React function component nor a custom React Hook function.
这是我的代码：
// MyFunctions.js
import use
浏览 16提问于2022-07-11得票数 0
回答已采纳
3回答
React router v4 -如何访问通过重定向传递的状态？
reactjs、redirect、react-router、react-redux
我在react的帮助下制作了一个登录页面，当登录成功时，它会重定向到另一个页面。让我调用在登录成功时呈现的组件'A‘。我想要将从数据库获取的数据传递给组件A，我通过在'Redirect‘组件的'state’属性中传递它来实现这一目的。但是，我不明白如何在最终呈现组件A的'Route‘组件中访问此状态。谁能告诉我如何访问？
我的代码如下：
Login.js：
import React from 'react'
import Center from 'react-center'
import PropTypes from 'p
浏览 0提问于2017-10-23得票数 17
回答已采纳
3回答
在组件内响应V6路由保护和路由
reactjs、react-router、url-routing、react-router-dom、react-component
我试图在我的项目中使用反应路由V6。
目前，我正在努力使认证和路由本身工作。我的代码的思想是：
未通过身份验证的用户：
使用我的登录组件重定向到/login。(仅登录组件)
认证用户：
加载gameComponent组件，gamecomponent中的其余链接将加载到名为middleContentHolder的gameComponents div类中
示例：
经认证的用户：
访问url /crime ->加载游戏组件，并在gamecomponent中加载crime组件。访问url /test ->加载游戏组件，并在gamecomponent中加载SideBarRight组件。
未通
浏览 3提问于2020-08-29得票数 4
回答已采纳
2回答
将所有带有#的url从HashRouter重定向到BrowserRouter
javascript、reactjs、react-native、redirect、react-router
我把HashRouter改成了BrowserRouter，现在我想重定向所有的urls来删除其中的#。(Url在邮件中-所以我必须这样做)。
我找到了与此类似的主题，但没有一个解决方案对我有效。
import { BrowserRouter } from 'react-router-dom'
class Index extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route exact path={"/"}
浏览 0提问于2020-06-27得票数 0
2回答
如何在登录页面上隐藏组件(导航栏)
reactjs
如何隐藏登录页面上的导航栏(‘/’)？我尝试过使用this.props.location和扩展导航栏组件，但似乎不起作用。我知道这很简单，但我无论如何也记不住该怎么做！我不想只在我想要显示它的页面上呈现组件。
App.js
import React from 'react'
import Navbar from './Components/Navbar'
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Componen
浏览 0提问于2021-05-13得票数 1
1回答
如何在路由变更时获得反应路由器路径
reactjs、react-router
我有一个App.jsx，它路由到(呈现)不同的组件。
但是，我在<NavigationBar />和h1标记Router和Switch之间设置了一个，因为我需要为每个页面呈现这两个组件。
所以现在我想要的是获取浏览器地址栏上显示的当前路由名称/路径名。当我单击不同的链接(Link)来呈现不同的组件时，这个路径正在改变。
但是path值是相同的/，尽管每次单击Link都会改变路径。我甚至使用了componentDidUpdate，但是它没有工作，因为它导致了错误
最大更新深度超过组件
这是我的App.jsx
import React, { Component } from &
浏览 2提问于2020-07-30得票数 0
回答已采纳
1回答
使用<导航/> ( v6)传递道具
reactjs、react-router-dom、react-props
对于需要身份验证(工作正常)的组件，我使用的是<ProtectedRoute/>。现在，我希望在将用户重定向到loginForm之前获得这样的位置：
import React from 'react'
import auth from '../../services/authService'
import { Navigate, useLocation } from 'react-router-dom'
const ProtectedRoute = ({ children }) => {
const location =
浏览 3提问于2021-12-07得票数 2
回答已采纳
1回答
useSelector首先返回未定义的，然后返回用户
javascript、reactjs、react-hooks、useselector
// auth provider
import React from "react";
import { useState } from "react";
import { useSelector } from "react-redux";
import { Navigate, useLocation } from "react-router-dom";
export const AuthContext = React.createContext();
export const AuthProvider = ({ childre
浏览 4提问于2022-10-01得票数 1
回答已采纳
1回答
类型记录和反应:在React中初始化RouteComponentProps成员
reactjs、typescript、react-router、react-component
我目前正在学习打字稿和反应现在和目前被困在能够访问‘匹配’成员的道具正确。更具体地说，我在初始化从RouteComponentProps接口实现的变量时遇到了困难。
为了简化操作，我有以下3个文件，相应的组件(path*)只呈现一个带有文本的标题：
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<React.StrictMode>
浏览 3提问于2020-03-28得票数 0
回答已采纳
1回答
消息头组件在路由更改后不会更新
reactjs、react-router-dom
当我单击Button时，我试图理解为什么Header组件没有更新。我相信问题是我没有和路由器联系。但是为什么当我切换路由时，App.js不重新呈现呢？
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import First from './First';
import Second from './Second';
import Third fr
浏览 3提问于2021-10-08得票数 2
回答已采纳
1回答
useLocation()甚至在路由器上下文中也不能工作
javascript、reactjs、react-hooks、react-router-dom
贝娄是我的进口品：
import React, { useState } from "react";
import { HashRouter as Router, Routes, Route, Link, useLocation} from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import About from './components/About';
import Works from
浏览 7提问于2022-05-27得票数 3
回答已采纳
2回答
默认情况下，如何使用React路由器V5滚动到顶部？
reactjs、react-router、react-router-dom
作为标题，每次使用<Redirect to="...">将页面从一个页面重定向到另一个页面时，我都希望滚动到顶部。在这个站点上，现有的答案(特别是这个流行的线程：)都不起作用。
具体来说，我希望React 16.8+，functional，react路由器V5-approach。我尝试使用以下方法
const {path} = useRouteMatch()
要实现以下组件，将其作为整个<div className="App">的包装器，因此我不必为每个想要实现此效果的组件包装：
ScrollToTop.js：
import {useEf
浏览 1提问于2021-05-24得票数 0
2回答
useLocation().pathname在react路由器-dom中正在改变，但是当我将它放在if语句中时，它一直是正确的。
reactjs、if-statement、react-router-dom
我在做一个反应应用。我正在导入useLocation并将其放入一个变量(位置)中。我正在检查路径名是否不是"/“，它应该输出false，但它在每个页面中都会一直声明为true。
import React, { useState, useEffect } from "react";
import { useLocation } from "react-router-dom";
function Header() {
const [inIndex, setInIndex] = useState();
let location = useLocati
浏览 2提问于2020-04-21得票数 3
回答已采纳
我的主要目的是重写Switch组件，然后通过显示实现组件的缓存，而不是每次都销毁它。
// App
const App = () => {
return (
<MySwitch>
<Route path="path1" component={<Component1>}>
<Route path="path2" component={<Component2>}>
</MySwitch>
)
}
// MySwitch
const cache
浏览 29提问于2021-05-15得票数 0
回答已采纳
2回答
在react路由器dom 6中添加组件内的路由
reactjs、react-router-dom
我试图从react路由器5迁移到反应性路由器6。我编写了一个简单的前端，只有点击登录按钮，你才能进入配置文件页面。在配置文件页面中有两个链接来查看配置文件和编辑配置文件。
//App.js
import './App.css';
import Header from './components/Header';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import Profile from '.
浏览 7提问于2022-09-12得票数 2
回答已采纳
2回答
TypeError:无法读取未定义的属性(读取“位置”)
javascript、reactjs、mern
错误出现在以下代码中
history.location.pathname正在抛出错误。(行号-3和6)
const LinkList = () => {
const history = useHistory();
const isNewPage = history.location.pathname.includes(
'new'
);
const pageIndexParams = history.location.pathname.split(
'/'
);
const page = parseInt(
浏览 4提问于2021-12-07得票数 0
回答已采纳
2回答
如何检测路由器路径'/‘是否为真？
javascript、reactjs、react-router-dom、react-state、react-redux-form
如何检测'/‘根路径是否为真？我想设置一些基本代码来隐藏路径'/‘上的导航栏元素，但是我看到的所有东西都需要使用钩子，而我的应用程序是在一个类组件中设置的，所以我不能使用这些钩子。有什么解决方案吗？到目前为止的基本代码。 import React, { Component, Fragment } from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import './tailwind.css'
import { LandingP
浏览 17提问于2020-04-03得票数 2
2回答
index.tsx:24未明错误: useLocation()只能在<Router>组件的上下文中使用
javascript、reactjs、react-router-dom
如果路径名为/admin、/employee、/publisher，则使用位置隐藏导航条。但是我错了说Error: useLocation() may be used only in the context of a <Router> component.这是我的App.js
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import Navbar from './components/Navbar';
functio
浏览 13提问于2022-04-23得票数 2
回答已采纳
1回答
嵌入式shopify应用程序中的客户端路由
javascript、reactjs、react-router、shopify、react-router-dom
我试图在嵌入式shopify应用程序中使用react-router来启用客户端路由。我使用了Shopify中的，但我不清楚./Routes文件中应该包含什么。我试图在Stack溢出或博客上搜索类似的问题，但是那里的信息有点过时。
我的代码: App.jsx：
import {
ApolloClient,
ApolloProvider,
HttpLink,
InMemoryCache,
} from "@apollo/client";
import {
Provider as AppBridgeProvider,
useAppBridge,
} from
浏览 7提问于2022-09-29得票数 1
回答已采纳
1回答
React-如果使用history.push访问特定路由，路由器v5不会重定向
reactjs、react-router、react-functional-component
在我的react应用程序中，我有/lead-manager路由，/login路由，还有/路由，后者是我不希望任何人访问的app.js本身，如果有人只是转到/路由，我希望他们重定向到/lead-manager路由。这就是我根据给定的解决方案所做的。
我的app.jsx部件
import {
BrowserRouter as Switch,
useHistory,
Route,
useLocation,
} from "react-router-dom";
const App = ({ confirmAuthentication }) => {
let
浏览 15提问于2020-05-08得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
