无法使用useLocation从react-router-dom访问功能组件中的状态
问：无法使用useLocation从react-router-dom访问功能组件中的状态。
答：在react-router-dom中，useLocation是一个React Hook，用于获取当前URL的location对象。然而，由于组件间的状态传递是单向的，useLocation无法直接访问功能组件中的状态。一种解决方案是通过其他方式将状态传递给使用useLocation的组件。
一种常见的做法是使用路由参数来传递状态。通过将状态作为URL参数的一部分，可以在useLocation之外访问到它。例如，可以将状态编码为查询字符串参数，然后在目标组件中使用useLocation获取当前URL，并从location.search中提取出状态。
另一种方法是使用状态管理库，如React的Context API或第三方库Redux。通过将状态存储在全局的状态管理容器中，可以在任何组件中访问到它，包括使用useLocation的组件。这种方式可以避免将状态直接传递给每个组件，并且可以更灵活地管理状态。
推荐的腾讯云相关产品：在腾讯云中，您可以使用云函数SCF（Serverless Cloud Function）来构建无服务器的应用程序，而无需关心服务器运维和部署。云函数SCF提供了事件触发、自动伸缩等特性，非常适合处理前端和后端之间的数据传递和状态管理。您可以通过腾讯云云函数SCF的官方文档了解更多信息和使用方式。
腾讯云云函数SCF官方文档链接：https://cloud.tencent.com/document/product/583
相关·内容
在React中，我尝试使用history.push传递路径名和另一个参数。当它执行时，应用程序重定向到指定的页面，但状态未定义，因此我无法获得其他参数。
<Route path='/main' exact component={Main} />
import { useHistory } from "react-router-dom";
var history = useHistory();
function handleSubmit(event) {
event.preventDefault();
history.push(&#
浏览 3提问于2021-09-12得票数 2
回答已采纳
2回答
我目前正在尝试完成从组件到组件的路由，并传递数据，以便新打开的组件可以使用它。经过几个小时的研究，我偶然发现了一些在我的案例中行不通的解决方案。
在我的应用程序中，我有两页:主页和搜索。应用程序由几个不同的组件层组成，例如: App.js -> imports Home.js -> imports Body.js。App.js通过使用React路由器来定义路由。主页的正文包含一个搜索栏。执行搜索时，应用程序将获取数据，并需要将这些数据传递给将显示数据的搜索页。请参阅以下文件：
App.js
import React from "react";
import {
浏览 6提问于2022-05-25得票数 1
回答已采纳
我使用useNavigate在组件之间传递数据。
import { useNavigate } from "react-router-dom";
function Categories() {
const navigate = useNavigate();
.
.
onClick={() => navigate("/books", {state:{ name: categorie.name }})}
然后我对第二个组件中的数据进行反演算。
import {useLocation} from "react-router-dom";
func
浏览 0提问于2022-06-21得票数 2
回答已采纳
1回答
你好Stackoverflow社区。因此，我在将数据从一个组件传递到另一个组件时遇到了问题。所以我有了Free To Play组件，它从json获取自由播放数据，并将其呈现在显示器上。我也有一个链接，应该打开一个支付路线，并通过数据。在付款我有一个过滤功能，这是根据id筛选。无论如何，当我按下链接，它应该渲染图像类别和价格，但它没有，我不知道为什么。不要被上下文搞糊涂了，这只是搜索功能而已。这个问题我已经贴了无数次了，但似乎没有人给我答案，为什么会发生这种情况。我可以使用Redux来实现此功能吗？如果有人能帮助我，我将不胜感激。干杯 import React from 'react&
浏览 39提问于2021-01-16得票数 1
回答已采纳
问题描述
我使用的反应-路由器-多姆与反应功能组件。我试图用"history.push“传递数据，这是不起作用的。
重定向到"history.push“本身的另一个页面的效果很好。但问题是：通过"state：{.}“将数据传递给组件时，当我试图使用组件中的"props.location.state”访问它时，“无法读取未定义的属性‘状态”。
我尝试过不同的路线定义。
代码
app.js
import React from 'react';
import PageList from './pages/PageList';
impor
浏览 5提问于2019-10-30得票数 2
我写了一篇博文。文章在cardEvent.js中，并点击按钮。它应该转到新的页面，并在那里呈现它的卡片细节。我怎样才能用反应钩子和useParams来实现它呢？EventList.js -->是我从api Event.js获取数据的地方-->我在卡片EventDetails.js中呈现获取的数据--当点击帖子时，应该在屏幕上呈现卡片的详细信息。现在我有硬编码。细节。
有谁能帮我解决这个问题吗？
//EventList.js
import React, { useState, useEffect } from "react";
import Event from &#
浏览 1提问于2021-06-02得票数 1
回答已采纳
2回答
我试图传递一个道具courseid到一个新的页面时，我点击link，而使用react-router-dom，但我似乎无法访问它。我尝试过不同的方法，但没有一个允许我在新页面上访问courseid。
在courseListItem中，我可以访问props.course.id，我有一个按钮，它带我到“/孔”
<Link
to={{
pathname: `/holes`, state: {courseid: props.course.id}
}
浏览 5提问于2021-11-02得票数 1
回答已采纳
react-router-dom的版本是v6，我在使用导航将值传递给另一个组件时遇到了问题。
我希望将选定的行传给另一个名为Report的页面。但是，我不确定我是否使用了正确的navigate方法语法，我也不知道如何在报告组件中获取该状态。
Material-ui表:我正在尝试在onClick参数中使用redirectToReport(rowData)。
function TableRows(props){
return (
<MaterialTable
title="Leads"
columns={[
..
浏览 0提问于2020-10-28得票数 6
回答已采纳
我基本上是想在我的一个组件中显示一些数据。数据是从我的主页传递的，但我无法使用useLocation使其工作。
我从我的消防队数据库得到数据。
我的主页是一个招聘板，我希望用户能够点击工作卡，并转到一个新的页面与该工作的所有细节。
我在控制台上看到我得到了数据，但我似乎无法在组件/页面中显示它。我在执行console.log时没有定义
详情见下文：
Jobs.js
import { Link, useNavigate } from "react-router-dom";
export default () => {
const navigate = useNavig
浏览 8提问于2022-10-22得票数 1
回答已采纳
我已经使用npx create-react-app创建了一个react应用程序。我正在使用React路由器来控制路由。我需要能够从我的props.location.search组件中访问Navbar。但是，由于Navbar不是Route的后代，所以location属性不会自动传递给Navbar。如何获得该属性并将其传递给Navbar中的App.js
// App.js
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { Cont
浏览 3提问于2020-09-07得票数 1
回答已采纳
3回答
当我在我的应用程序上重新加载'details‘页面(它不是主页)时，我得到了错误：
"TypeError:无法在未定义的“国家”的属性‘标志’结构。“。
我想，当数据从主页传递到另一个页面时，如果我们不从主页传递到details页面，我们就无法从API加载数据。
经过一些研究，我得出结论，我必须修改webpack.config.js中的一些内容，但是当我使用命令创建应用程序时：
npx创建-react app my-app
我很难找到webpack配置文件，我甚至不确定这是否是解决方案。
主页上的卡片(点击后，指向特定国家的详细页面)：
import { Link } from
浏览 4提问于2021-05-31得票数 0
回答已采纳
我发现使用<React component>和<React render>在react-router-dom 6.x中可能会被弃用，所以我遵循删除了component属性，而是将组件嵌套为<Route >节点的子节点。它工作得很好，直到我到达使用动态参数的路由，它抛出了一个错误。
我从..。
<Route exact path={`/:category`} component={CategoryPage} />
为了..。
<Route exact path={`/:category`}>
<CategoryPage /&g
浏览 0提问于2020-05-20得票数 0
3回答
使用react-router-dom，如何检测用户何时导航到新页面？
我目前正在使用"react-router-dom": "^4.2.2"和"react": "^15.6.1"。当用户选择了一个新的目标URL时，我想关闭我的移动导航菜单，但是我在检测路由更改时遇到了问题。
是否有一个回调我可以连接到react-router-dom？我希望能够按照location.onChange(() => { this.state.collapsed = true; })的方式调用代码
我的当前代码如下：
组件：
class Leftn
浏览 1提问于2017-09-15得票数 7
回答已采纳
4回答
我希望每次路由改变时console.log('Refresh')都会运行(从Component1切换到Component2)。但只有在第一次渲染时才会触发。为什么？
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(<BrowserRout
浏览 14提问于2019-09-18得票数 27
回答已采纳
1回答
我在通过React路由器发送数据时遇到问题，我的数据来自Wordpress REST
首先是我的Nav函数，它是从Wordpress读取的，这是工作的。
<Link to={menus[ky].slug} params={{ pageId: menus[ky].post_name }}>{menus[ky].title}</Link>
接下来是我的应用程序功能，它使用MyRoutes函数，它动态地创建路由器，然后我有我的页面组成，我需要它来还原来自Nav的数据。
basicallY我想从Wordpress动态生成URL以保持SEO，然后从REST (尚未构建，仍然试图通
浏览 0提问于2020-12-07得票数 1
回答已采纳
我想在我的应用程序中使用react- router -dom中的3个东西来实现路由器，即路由、useNavigate和Redirect。但问题是路由和useNavigate在react-router-dom 5.2.0中不可用。因此，为了使用路由和useNavigate，我安装了react-router-dom v6.0.0-alpha.1。但问题是Redirect从react-router-dom v6.0.0-alpha.1中删除了。现在我不明白如何在特定的react-router-dom下使用路由、useNavigate和Redirect
import React, { lazy, Su
浏览 0提问于2021-01-26得票数 1
我需要关于react-router-dom的帮助，我是新手，似乎可以找到任何解决方案。我从一个api调用中得到了三个结果，在这个api调用中，我将数据映射到UI上，现在我需要的是，如果我单击其中一个列表中的一行，我希望它将我带到一个屏幕，该屏幕只显示我单击的那一项的详细信息。
import React, { Component } from "react";
export default class User extends Component {
state = { userDetails: "" };
componentDidMount() {
浏览 2提问于2020-01-12得票数 4
我正在创建一个食谱研究项目的反应。在主页上，我按下‘搜索配方’，它会为我找到它们，然后‘查看食谱’，它应该给我一些我必须决定的数据。在组件中执行console.log (this.props)时，它将返回所有对象，而不需要状态值，因此无法访问数据。你能帮帮我吗？我把密码留给你以便更好地理解。
import logo from "./logo.svg";
import "./App.css";
import React, { useState } from "react";
import MealList from "./MealList&
浏览 9提问于2021-12-28得票数 0
回答已采纳
我在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
回答已采纳
1回答
我遇到了那些私密路线的麻烦，而且没有被重新引导。我想知道如何修复这段代码。
这是我的App.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch, Routes, Route, Swit } from 'react-router-dom';
import MasterLayout from '../src/layouts/admin/MasterLayout'
import {
浏览 4提问于2022-01-24得票数 1
回答已采纳
我正在尝试在单击事件之后更新一个State。但是，我的组件实例周围的BrowserRouter的链接正在覆盖它的onClick函数。
但是当我移除“链接到”时，状态成功地更新并打印在控制台中。
最后，我希望能够将更新的状态传递给PlayerPage组件。但我现在正在使用控制台来测试它的更新--但它没有。
这里是我的代码：
Home.js -包含单击事件.
import { Link } from "react-router-dom";
import { useState, useEffect } from "react";
export default fun
浏览 1提问于2021-09-18得票数 2
回答已采纳
在我想要测试的组件中，我使用useLocation钩子。在我的组成部分中：
function Test() {
const history = useHistory();
const location = useLocation();
const query = new URLSearchParams(location.search).get('value');
return <div > Welcome < /div>
}
为了测试我编写的组件，我编写了这个测试：
jest.mock('react-router-dom'
浏览 7提问于2021-07-04得票数 3
我刚开始编写代码，我尝试使用道具将数据从一个组件传递到另一个组件，并通过链接传递数据，但是它不起作用，因为我正在接收状态:在console.log中未定义
我找不出错误或错误，请帮帮我。
这是我的密码
import React from 'react';
import { Link} from 'react-router-dom';
import '../components/show.css';
import image from '../images/youtube_img2.png';
const ShowCard =
浏览 2提问于2021-12-27得票数 0
2回答
我正在编写的程序根据用户的生日告诉用户他们的占星学标志(用户从选择的元素输入)。我使用路由器在三个页面之间切换: Home、Quiz和Result。这三个组件存储在src中的Pages文件夹中。**测试包含CalcSign，它是计算人的符号的组件。signState是测试组件中的一个状态。我希望在结果页**上显示signState，并可能在结果中的未来比较语句中使用它。目前，signState不显示在结果页上。
谢谢
Quiz.js
import React from 'react';
import {useState} from 'react';
import
浏览 6提问于2022-01-04得票数 1
回答已采纳
2回答
App.js，其中声明了我的所有路线：
function App() {
return (
<div className="App">
<Routes>
<Route path="/">
<Route index element={<Homepage />} />
<Route path="settings" element={<Settings />} />
&l
浏览 6提问于2022-07-21得票数 2
回答已采纳
这是我的/chat页面，从/login页面调用。我给这个聊天页面传递了一些数据 // this is inside of the page /login
history.push({
pathname: '/chat',
state: {
email: email,
name: password,
},
}) 问题是当我从/login访问/chat时，一切都正常，但当我只访问/c
浏览 67提问于2021-04-09得票数 0
1回答
我在建立一个404页面。它将在/404上运行，对于任何未知的路由，我都将使用<Navigate path='/404' />。这一切都很好，但我也想显示URL的详细信息，甚至记录错误的链接。为此，我需要访问以前的路由详细信息。 还有一篇类似的文章，但它讨论的是导航历史，而不是显示历史信息。 How to go back to previous route in react-router-dom v6 我尝试了以下几种方法的不同组合，试图从useLocation获取细节并作为状态传递，但它抛出了错误：Error: useLocation() may be used
浏览 130提问于2021-11-19得票数 2
回答已采纳
我有一个搜索组件调用我的API，我想将数据传递到结果页面。相反，我得到了这个错误：
TypeError:无法读取未定义的属性“location”
我试着在网上到处寻找解决方案，但它不能解决我的问题。我做错了什么？
app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom&#
浏览 11提问于2020-06-07得票数 0
我正在尝试从react.js项目中获取路由的id，如下所示：page1#view-all 我尝试使用原生的JavaScript、document和window，但不幸的是，由于SSR的原因，我不能这样做。 除了上面提到的功能之外，还有其他的功能吗？如何获取具有href id的路由器链接？page1#view-all 谢谢 仅供参考，我在使用document或window时遇到的错误表明这些都没有定义。 下面是一个代码片段： <Link
to="/page1#view-all"
className={`sub
浏览 31提问于2020-01-14得票数 0
2回答
我用的是反应和反应-路由器。
我希望在用户组件中获得:groupId的值。
在Groups组件中，我可以使用useParams获取groupId，但我希望在用户组件中获取groupId，并将其作为支持传递给Groups组件。
import React from 'react';
import {Route, useHistory, useParams} from 'react-router-dom';
import User from 'components/User';
import useSearchParams from './us
浏览 8提问于2022-01-12得票数 0
3回答
我得到错误的对象是类型‘未知’的当使用反应钩子useHisotry，这是细节，谢谢您的帮助！
节点版本: v12.14.1
反应版本: 17.0.1
react路由器-dom版本: 16.9.8
@react类型-路由器-穹顶版本：^5.1.6
import { useHistory } from "react-router-dom";
const history = useHistory();
useEffect(() => {
if (history.location.state) {
const taskId: any = history.lo
浏览 2提问于2021-04-19得票数 1
2回答
我有一个组件，它使用useLocation钩子从URL获取路径。
const { pathname } = useLocation();
useEffect(() => { }, [pathname]);
当我试图用它来模拟位置时，
import React from 'react';
import ExampleComponent from './ExampleComponent';
import { fireEvent, render } from '@testing-library/react';
import { shallow }
浏览 1提问于2021-06-14得票数 4
2回答
我创建了一个带有呈现调用细节的react组件，在组件中我使用useEffect来设置callInfo状态，然后它导致无限循环，即使我使用[]作为第二个参数，有人能帮我修复这个问题吗?谢谢！
import { useLocation } from "react-router-dom";
import { useState, useEffect } from "react";
const ActivityDetail = ({ onToggleArchived }) => {
const { call } = useLocation().state;
浏览 10提问于2021-10-06得票数 1
回答已采纳
使用react-router-dom 5.2 -当我在页面上向下滚动，然后转到一个新的页面时，它仍然会向下滚动。我如何从顶部显示它？谢谢
浏览 0提问于2020-10-04得票数 0
回答已采纳
我有一个react应用程序，它有这样配置的路由 /packages/:packageId/years/:yearsId，其中/packages返回一个组件，该组件具有到/packages/:packageId的链接，该组件将继续呈现到/packages/:packageId/years/:yearsId的最终路径。 现在的问题是，我想从一个从/packages/:packageId开始的应用程序接口中获取数据，并将其向下传递到从/packages/:packageId呈现的组件。 我想知道做这件事的最佳策略是什么。目前，我通过一个链接组件传递状态，以便将组件之间的链接设置为 import {
浏览 15提问于2021-01-17得票数 0
如果路径名为/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
回答已采纳
我正在尝试将道具传递给Link元素的路由。但是当我打开invoiceDetails组件时，我说props是未定义的。 下面是我尝试通过道具的方法。它是正确设置的，因为它转到了InvoiceDetails组件。我在index.js中声明了路由 <Link props={{name: 'jack', age: 25, city: 'Antwerp'}}to='/InvoiceDetails'><p>VIEW</p></Link> 在InvoiceDetails组件中 import React from
浏览 13提问于2019-12-24得票数 6
回答已采纳
1回答
我使用的项目反应路由器，我需要呈现单独的道具(介绍)到另一个组件，可以通过我的卡组件访问。目前，每张卡片都有一个博客的标题，当点击“阅读更多”按钮时，我希望文章页面呈现每个博客的介绍，但没有显示。
博客
import React, {useState,useEffect} from 'react'
import Article from './Article'
import Card from './BlogCards/Card'
function Blog(props) {
const [blogs, setBlogs] = us
浏览 1提问于2021-06-10得票数 1
回答已采纳
我试图在我的function组件中使用useLocation钩子，但是我得到了Error: Invalid hook call. Hooks can only be called inside of the body of a function component.。
我的应用程序结构是这样的：
import React, {useEffect, useState} from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, S
浏览 224提问于2020-03-05得票数 3
2回答
我正试图从链路上传递线路状态的数据。我想打开联系人详细信息页。我的代码是
import React from 'react'
import Me from "../images/blank-profile-picture-973460__340.webp"
import {Link,useNavigate} from "react-router-dom"
const Contactlists = (props) => {
const Contact =props.Contact;;
const Deleteitem=(ID)=>{
p
浏览 12提问于2022-07-18得票数 1
回答已采纳
1回答
我有一个用例，在这个用例中，我使用useHistory钩子在组件之间重定向和传递状态。
/* first component */
const {useHistory} from 'react-router-dom';
const history = useHistory();
history.push({pathname: '/next',course: 'some value'});
/* second component */
const location = useLocation();
const value = location
浏览 5提问于2020-07-16得票数 0
回答已采纳
我正在使用react-router-dom。我有这样一种路由： <Route exact path="/products?category=:category" component={Catalog} /> 但是我没有得到:目录页面上的类别。尝试使用以下代码捕获数据： const params: { category: any } = useParams();
const category = params.category;
浏览 27提问于2020-10-28得票数 0
回答已采纳
这是我的主要部分类，所有到链接的路线都保留在这里。
export default class Section extends React.Component {
render() {
return (
<div style={{backgroundColor:"white"}}>
<Routes>
<Route path="/" element={<Home/>} />
浏览 5提问于2020-11-11得票数 32
回答已采纳
我有一个单独的文件，在这个文件中，我将常用的函数放在我的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
回答已采纳
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
回答已采纳
我有如下所示的标题组件：
import { useLocation } from "react-router-dom";
const Header = () => {
let route = useLocation().pathname;
return route === "/user" ? <ComponentA /> : <ComponentB />;
}
您将如何模拟这个useLocation()以获得用户的路径？
我不能像下面这样在测试文件中调用Header组件，因为我收到了一个错误：
TypeError:
浏览 21提问于2020-01-28得票数 38
回答已采纳
我使用的反应路由器挂钩导航useHistory。
导航：history.push("/home", { update: true });
在家里:我正试着去找let {update} = useParams();
但是update总是没有定义。这个代码有什么问题。有什么建议吗？
浏览 4提问于2019-12-24得票数 23
回答已采纳
我正在构建一个具有多条路径的应用程序，因此您可以猜到我需要在不同的路径之间传输数据，我正在使用react-router-dom使用useHistory.push("/route")在这些路径之间导航/重定向。我的一条路径中的状态是否可以由我的另一条路径访问，因为它们位于不同的模块中，如下所示 <Switch>
<Route exact path = "/">
<Home/>
</Route>
<Route
浏览 14提问于2021-05-06得票数 1
回答已采纳
1回答
在MUI表中，当单击行时，我将用户导航到另一个页面。是否有选项可以直接将数据从行中传递给useNavigate，而不是使用localStorage？
<TableBody>
{data &&
data.map((row, index) => (
<TableRow
hover
key
浏览 2提问于2022-03-10得票数 2
回答已采纳
2回答
在根据变量的路由将类分配给变量和div时，我遇到了一个问题。我不知道我做错了什么，一切似乎都很好，那么错误在哪里呢？我非常好奇我到底做错了什么。
import React from 'react'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import { useLocation } from "react-router-dom";
import { useEffect } from 'react&#
浏览 10提问于2021-05-27得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
