无法获取API URL以重新路由到正确的地址: React Hooks
问题：无法获取API URL以重新路由到正确的地址：React Hooks
回答： React Hooks是React的一个特性，它允许我们在无需编写类组件的情况下使用状态（state）和其他React特性。在React Hooks中，我们可以使用useEffect钩子来执行副作用操作，例如数据获取、订阅事件等。
对于问题中的"无法获取API URL以重新路由到正确的地址"，主要涉及到API URL的获取和路由问题。以下是一个可能的解决方案：
- 获取API URL：
- 如果API URL是在后端服务器上动态生成的，你可以通过后端接口来获取API URL。可以使用axios、fetch等库发送HTTP请求到后端接口，然后从响应中获取API URL。
- 如果API URL是固定的，你可以将API URL直接硬编码在前端代码中，或者将其存储在配置文件中。
- 路由到正确的地址：
- 你可以使用React Router来处理路由。React Router是一个流行的React库，用于处理单页应用的路由。你可以定义路由规则，并在用户导航时跳转到正确的地址。
- 在React组件中，你可以使用 useHistory 钩子来进行路由跳转，通过调用 history.push() 方法并传入正确的路径来导航到目标页面。
关于React Hooks的更多信息，你可以参考以下腾讯云产品和文档链接：
- React Hooks官方文档：https://zh-hans.reactjs.org/docs/hooks-intro.html
- 腾讯云Serverless Cloud Function（SCF）：https://cloud.tencent.com/product/scf
- 腾讯云云开发（Tencent Cloud Base）：https://cloud.tencent.com/product/tcb
请注意，以上答案仅供参考。实际解决方案可能因具体情况而异，你可以根据实际需求进行调整和实现。
相关·内容
我正在构建一个React项目，该项目通过自定义钩子从API中检索数据，一旦数据被检索，它就会显示卡片，单击它们打开描述性页面。到现在为止一切都很好。
// App.js
<Routes>
<Route path="/" element={<Home />} /> // cards list
<Route path="/:eleId" element={<Details />} /> // description page
</Routes>
// Home.jsx with
浏览 1提问于2022-02-08得票数 2
回答已采纳
我正在使用react路由器来导航。现在我的问题是如何从组件内部更改地址栏中的url？
假设我的url如下：https://websitename/loc/lib/12，并且我有一个下拉列表，其中包含一些数字，当选择这些数字时，它应该更改上面的url，即/lib/...<--之后的数字。
修改它的最好方法是什么？我是否必须将更改推到组件上，直到它到达声明react路由器的页面？或者我应该通过使用window.location.href来更改页面中的direclty？
信息：
React version: 17.0.1
React-router-dom: 4.3.1
Using React
浏览 15提问于2022-02-15得票数 0
1回答
猫鼬分类
、、
我有这样的原始文章集：
{
title: "how javascript closure works?",
tag: "JS"
},
{
title: "react hooks exploration",
tag: "React"
},
{
title: "Prototype link in Javascript",
tag: "JS"
},
{
title: "Component lifecircle in React",
tag: "Rea
浏览 3提问于2022-01-10得票数 -1
回答已采纳
2回答
我想弄清楚如何让帐户激活链接做出反应。Rails API发送帐户激活URL如下：
我希望设置一个React操作，将该令牌发布到API中，然后组件将呈现一条“帐户激活”消息。
我目前被困在两个问题上：
如何在浏览器中直接打开上面的链接？我得到“无法获取/用户/确认”错误消息。我读到browserHistory应该解决直接调用React的问题，但我不知道如何实现它。
如何从链接中捕获令牌？“/用户/确认/:令牌”是正确的方法吗？
routes.jsx：
出口违约( )；
浏览 1提问于2017-05-05得票数 1
如标题所示:当我当前处于动态路由<Route path=':username' element={ <UserPage /> } />并尝试从http://localhost:3000/Fexell转到http://localhost:3000/Test时，页面将不会更新。如何使组件/页面刷新从新路由加载？谢谢
App.js：
import { useState, useEffect } from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate, Outl
浏览 3提问于2022-08-12得票数 1
我成功地实现了一个useFetch函数来调用API。如果我将这样的代码添加到如下功能反应组件的根目录中，它就能很好地工作：
const [{ data, isLoading, isError }] = useFetch(
'http://some_api_endpoint_path'
);
export const useFetch = (url) => {
const [data, setData] = useState();
const [isLoading, setIsLoading] = useState(false);
const [
浏览 0提问于2019-08-29得票数 2
我的组件通过调用一个钩子文件来获取数据，该钩子文件包含通过API请求的逻辑。默认情况下，它将在没有任何额外参数的情况下调用API。在GUI中，我还显示了一个输入，用户可以在其中输入文本。每次他写一封信，我都想重新获取数据。但是我真的不确定如何使用react和钩子来做到这一点。 我声明了"useEffect“。我看到输入的内容发生了变化。但是还有什么呢？我不能从那里调用钩子函数，因为我得到了这个错误： “无法在回调中调用React Hook "useFetch”。必须在React函数组件或自定义React Hook函数react- Hooks /钩子规则中调用react hoo
浏览 37提问于2020-01-30得票数 0
我正在构建一个应用程序后，Rest国家API挑战来自前端()。我遇到了一个问题。单击countryDetail.js中的路由器链接时，url会更改，但除非刷新页面，否则组件不会重新呈现。
CountryDetails.js
import React, { useState, useEffect } from "react";
import axios from "axios";
import {Link} from "react-router-dom";
import {CountryDetailStyles, ImgContainer, Cou
浏览 3提问于2021-06-15得票数 1
回答已采纳
我使用react query是因为它非常强大，但是我很难在提供者内部的许多组件之间共享我的数据。我想知道这是不是正确的方法。
PostsContext.js
import React, {useState} from 'react';
import { useTemplate } from '../hooks';
export const PostsContext = React.createContext({});
export const PostsProvider = ({ children }) => {
const fetchTemp
浏览 39提问于2021-02-13得票数 2
回答已采纳
4回答
如何从url获取键值
、、、、
我正在使用Axios从API中获取数据。从一个页面，我通过URL发送数据到另一个页面，我想在另一个页面上使用。
http://localhost:3000/otp?email=test.k@gmail.com
我想知道电子邮件的价值。在react项目中，我使用了react-router-dom，Axios，hooks。
浏览 46提问于2021-09-29得票数 0
我正在尝试加载一个基于react-router-dom路由的详细视图，该路由将获取URL参数(id)，并使用该参数进一步填充组件。
我的路由看起来像/task/:id，并且组件加载正常，直到我尝试像这样从URL中获取:id：
import React from "react";
import { useParams } from "react-router-dom";
class TaskDetail extends React.Component {
componentDidMount() {
let { id } = usePara
浏览 3提问于2019-10-25得票数 59
我有一个基于Laravel 5.4框架的react应用程序。我遇到的问题是，在使用诸如{ URL }/{slug}之类的url刷新页面时，应用程序会中断。
下面是位于App.js中的路由器组件
<Router>
<div className="App__container container-fluid">
<Navigation />
<Switch>
<Route path="/films" component={FilmsContainer}/>
浏览 10提问于2017-07-18得票数 0
回答已采纳
2回答
我试图将Storybook应用于React (NO-CRA)，但是Storybook无法解析webpack.config.js和webpack.shared.js的“别名”设置，但例如RTL。我试着配置一个. .storybook/webpack.config.js，但是它仍然不能工作，我找不到解决这个错误的关键。
我使用节点-v -> v14.17.6
我的文件夹结构是：
- .storybook
- api
- cypress
- src
- components
- Loading
- Loading.js
- Loading.module.c
浏览 7提问于2022-02-09得票数 4
我对自定义钩子的第一次尝试是疯狂地循环，我不完全明白为什么我需要测试它是否保存了一些响应或错误，然后调用如果没有呢？
import React, { useContext } from 'react';
import { Context } from "../components/context";
const useFetch = (url: string, bearer: string, method: string, body: any) => {
const { global } = useContext(Context) as {g
浏览 4提问于2019-10-04得票数 1
回答已采纳
我想通过扫描MDNS来获取我的iPhone当前连接到的路由器的IP地址。
我认为这可以通过苹果提供的Bonjour编程来实现，但无法获得正确的实现/指导。
有没有人能提供一些参考代码/文档/url？
谢谢
浏览 29提问于2016-08-11得票数 0
回答已采纳
在react Hooks中，我试图从API数组中获取数据，但在Foreach函数中，API调用导致无限。如何解决这个问题？
const [symbols, setSymbols] = useState([]);
getPortfolioSymbolList(portfolio_name).then(data => data.json()).then(res => {
res.forEach((symbol_data)=>{
fetchPrice(symbol_data.symbol).then(price => {
setSymb
浏览 0提问于2020-10-07得票数 1
1回答
我有一个使用react-router的React应用程序。我的路由的简约版本如下：
<Router>
<div className="App">
<Sidebar />
<div className="app-container">
<Switch>
<Route path="/" exact render={Home} />
<Route path="/logs" e
浏览 4提问于2020-09-29得票数 1
我是NextJS的新手。我很难理解useSWR钩子是如何工作的。
我有一个动态URL，如-/比较法/:id
例子:/比较/法拉利-vs-宝马
我需要检查路由器是否返回id，然后拆分汽车品牌，并为每个品牌信息发出多个API请求。
以下是我尝试过的：
useEffect(()=>{
if(!router.isReady) return;
let queryParam = router.query.id
let brandsList = queryParam.toString().split("-vs-")
console.log(
浏览 17提问于2022-05-12得票数 0
2回答
我有一个使用react的.net核心2.2SPA作为前端。在react端，我简单地使用href对后端进行GET调用。
<a href={`http://localhost:5004/api/Reports?team=${this.state.teamName}&project=${this.state.projectName}`} class="button">Submit</a>
当我从visual studio调试应用程序时，路由被正确处理，它调用后端控制器并下载一个文件。
当我将应用程序发布为自包含的exe时，似乎react应用程序正在拦截
浏览 28提问于2019-10-30得票数 4
1回答
到目前为止，我使用React从访问新冠肺炎数据，我已经成功地访问了：country and province。但是当我来到stats下的确诊和死亡病例时，我无法访问这些数据
问题似乎在于API数据函数，在那里我得到了一个错误，不允许我在=> stats.confirmed上使用一个点
下面是API数据的当前代码：
import React from "react";
import { useFetch } from "./Hooks";
function Data() {
const [data, loading] = useFetch
浏览 0提问于2020-05-13得票数 1
回答已采纳
我想在导航(路由)的参数更新时使用useSWR进行API调用，并将其值存储在使用contextAPI的自定义钩子中。
我有一个呈现用户列表的组件UsersPage，它需要有分页，当我单击某个用户时，根据他的id和请求的查询(页面、userId、nationality=nat、性别等)共享他的链接。
我正在考虑使用useSWR来获得更好的用户体验。
我试过了
import { useUsers } from "../../hooks/useUsers";
import { useFetch } from "../../hooks/useFetch";
.
.
.
浏览 10提问于2021-09-25得票数 0
你好，我尝试构建一个从API获取数据的应用程序。我使用SWR Hooks来获取数据
// libs/fetch.js
import fetch from "isomorphic-unfetch"
export default async function(...args) {
const res = await fetch(...args)
return res.json()
}
// App.js
import React, { useEffect } from "react"
import "./styles.css"
import
浏览 27提问于2020-02-24得票数 3
回答已采纳
2回答
我一直在学习creation路由器，当我试图实现一个基于获取api调用的片段的动态页面创建时，遇到了一些问题。
基本上，在用户单击链接后，我尝试将用户重定向到一个新页面--这个新页面将是一个新的组件，我将在这个组件上进行一个新的api调用，其中slug作为我的搜索参数。
但是，我很难根据弹格动态地更改页面。
下面是一个组件(BoxScore.js)，在该组件中，我进行了初始的获取和显示数据-
import React from "react";
import { useEffect, useState } from "react";
import { Link
浏览 2提问于2022-03-31得票数 1
回答已采纳
1回答
我试图用Ethereal捕获本地主机流量，如果不将本地主机流量重新路由到您的路由器网关，它就无法工作。我没有完全正确地使用route命令，并把路由表搞砸了。我输入了route -f来清除路由表并重新启动，但是当我完成重新启动时，路由表没有恢复到原来的状态。我没有使用-p参数，所以在重新启动之后，我的任何更改都不应该持久存在。
如何将路由表还原到其默认路由？
浏览 0提问于2012-08-31得票数 3
回答已采纳
2回答
如果我单击某个按钮，我需要重新获取数据，但是当我在里面调用钩子时，单击处理程序就会得到以下错误。
const Menus = ({ menus, title }) => {
const handleClick = () => {
const { data: cartItems } = useFetch(API_URL + 'cart');
}
}
src\components\Menus.js第26:13行: React "useFetch“在函数"handleMenu”中被调用，该函数既不是function函数组件，也不是自定义R
浏览 3提问于2021-10-13得票数 1
回答已采纳
我有一个自定义钩子，我正在使用它在我的react前端应用程序上发出API请求，但这个钩子似乎有一个bug。 它按预期发出API请求，但每当我卸载当前正在进行请求的容器/页面时，我的钩子都不知道该页面已被卸载，因此它不会取消请求，因此react会抛出“无法在卸载的组件上执行React状态更新”警告。 export function useFetch(initialValue, url, options, key) {
const [response, setResponse] = useLocalStorage(key, initialValue);
const [error, set
浏览 42提问于2019-09-13得票数 1
如何解决以下问题？：
对于primereact datatable，我使用react挂钩。当我试图在类似于useEffect的axios调用中使用axios调用(下面代码中注释掉了代码的一部分)中时，我一直得到以下错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of
浏览 3提问于2021-05-11得票数 1
我正在使用react和antd进行开发。
这是我写的useAxios。
代码
import { useState, useEffect } from 'react';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000/';
const useAxios = ({ url, method, body = null, headers = null }) => {
const [response, setResponse] = useSta
浏览 2提问于2021-11-25得票数 0
1回答
我试图在我的功能组件中使用获取助手函数，但是对于React抱怨：
src\components\Header.js
第19:30行: React "useFetch“在函数"handleSearch”中被调用，该函数既不是React函数组件，也不是自定义React函数。rules组件名称必须以大写字母rules hooks/规则-hooks开头。
我知道函数组件应该以大写字母开头，但是，useFetch不是组件，它只是一个辅助函数。我做错了什么？我知道我可以通过调用函数UseEffect而不是useEffect来解决这个问题，但我应该这样做吗？
这是我的helper.js
浏览 2提问于2020-11-05得票数 3
回答已采纳
1回答
我使用React Hooks从现有的API中获取数据。这是我的密码
import React, { useState, useEffect } from "react";
export const People = () => {
const [people, setPeople] = useState([]);
const url = "http://127.0.0.1:5000/people";
async function fetchData() {
console.log("calling api .. ")
浏览 2提问于2020-04-25得票数 1
回答已采纳
这是我的app.js文件。这里似乎一切都很好，我不相信这里有什么需要改变的，因为当我简单地输入url时，路由工作得很好。 import React, { Component }from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch } from "react-router-dom";
// Layouts
import Header from '../components/layouts/Header';
imp
浏览 14提问于2020-10-28得票数 0
回答已采纳
我正在尝试使用本教程：Auth0在我的React项目中实现。
由于我不想在每个页面上传递访问令牌，所以我使用的是一个全局文件，我尝试在每个Axios调用上使用该文件。
代码(api.js)：
import axios from 'axios';
import { useAuth0 } from '@auth0/auth0-react';
const {getAccessTokenSilently} = useAuth0();
const token = await getAccessTokenSilently();
export default axios
浏览 19提问于2022-10-14得票数 0
1回答
我有一个左侧菜单，其中包含需要根据当前URL路径选择/取消选择的子选项。在寻找解决方案的过程中，我发现以下代码给出了如下所示的ESLint错误： useEffect(() => {
if (window.location.pathname === "/events/list") {
setManageEventsOpen(true);
setSelectedListItem(LIST_SELECTED);
}
if (window.location.pathname === "/events/map") {
浏览 113提问于2020-01-02得票数 2
我刚刚开始使用react，我正在expressJS中为react构建api，并使用react-router-dom进行路由，我遇到了像这样的/api/:token这样的路由，在使用react之前，例如密码恢复，我可以只呈现token变量，并使用呈现的变量执行post请求，如下所示
在服务器中
router.get('/reset/:token', (req,res)=>{
res.render('reset', {token: req.params.token})
})
在客户端
<form action="/reset/{{
浏览 0提问于2019-02-26得票数 0
最近，我开始使用RTK查询来获取应用程序中的数据。在其中一个用例中，我希望使用createAPI突变的结果，其中我已经在服务器上创建了一个资源一次。这涉及到创建一个特定的有效负载。
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const createResource = createApi({
reducerPath: 'someReducerPath',
baseQuery: fetchBaseQuery({ baseUrl: win
浏览 10提问于2022-11-17得票数 1
回答已采纳
1回答
我正在开发一个具有react路由器的react应用程序，服务器同时承载了react应用程序本身和REST。路由器是ConnectedRouter的反应路由器-路由器-redux.据我所知，一旦您在浏览器中打开了应用程序，对URL的任何更改都不会从服务器处请求，而是在reload路由器中处理客户端，即使您重新加载页面或将某些内容手动写入地址栏。
当第一次打开应用程序时，实际的HTML、JS和CSS文件都是从web服务器加载的，而web服务器被配置为只在用户获得授权时才提供这些文件。这样，服务器可以将用户重定向到第三方身份验证站点，或者在用户通过身份验证但未授权时提供401消息。但是，当用户会话到
浏览 1提问于2017-11-23得票数 2
回答已采纳
1回答
我设法设置反应，基本上表示为api服务器。我可以使用react路由器浏览我的react应用程序，这是一个单一的页面应用程序。
但是，例如，当我刷新时，我得到了无法获得/login的错误--我知道这个问题，但我不知道如何修复它。
浏览 2提问于2017-04-15得票数 0
回答已采纳
我有一个定制的钩子，它的结构是：
const urlHook = () => {
const router = useRouter();
const read = () => {
return validate(router.query.param);
}
const write = (params) => {
router.push(
{
query: {
param: params,
},
},
undefined,
{shallow: true},
)
}
const valida
浏览 2提问于2022-05-05得票数 0
回答已采纳
2回答
我是NEXTJS的新手，我创建了一个天气应用程序，.I正在使用一个openweather api，但是如何在next/api中使用它。我试过在next/api中创建一个文件next/api并以这种方式编写代码，但我无法在控制台中获取数据？
today.js
const apikey = process.env.REACT_APP_API_KEY_1;
const url = `https://api.openweathermap.org/data/2.5/weather?q=Bhopal&appid=${apikey}`;
const fecthInfo = async() =>
浏览 6提问于2022-03-21得票数 0
按照我设置这个应用程序的方式，每个请求都由执行JS服务器端呈现的相同路径服务：
server.use("*", (req, res) => {
console.log(`from the server route: ${req.path}`)
const context = {};
const serverRenderedHTML = ReactDOMServer.renderToString(
React.createElement(
StaticRouter,
{ location
浏览 2提问于2018-02-26得票数 0
回答已采纳
1回答
我是ReactJS新手，正在构建一个基本的应用程序。这里我使用了受保护的路由器，并使用useContext和本地存储实现了授权机制。如果用户试图访问仪表板，目标是重定向未登录到登录页的用户。
登录后，访问令牌将保存到本地存储，帐户信息将保存在auth上下文中。然后我去仪表盘重新加载页面。我实现了一个useEffect挂钩来检查本地存储中的令牌，并且我认为当我在仪表板页面重新加载时，auth提供程序将检查令牌并返回经过身份验证的结果。但是，它不像预期的那样工作，所以我被重定向到登录页面(尽管触发了useEffect回调)
下面是我的代码：
src\components\App\inde
浏览 2提问于2022-09-09得票数 -1
3回答
我正在开发一个类似于React js博客的网站，我发现一些管理路线的问题。我的带有文章URL的页面是这样的: are站点/页面/3 我想重定向到首页时，页面索引是1，因为首页是第一页的文章默认。我的路由器如下所示： <Router>
<Switch>
<Route exact path="/" render={() => <Page postsPerPage={3}/>} />
<Route exact path="/Page/:activePage&#
浏览 35提问于2020-01-21得票数 2
回答已采纳
刚把react从v16更新到v17，得到了错误，编译失败。 Line 37:9: React Hook "Api.useAuth" is called conditionally. React Hooks must be called in the exact same order in every component render react-hooks/rules-of-hooks
Line 47:9: React Hook &
浏览 31提问于2021-01-20得票数 0
回答已采纳
我无法利用useHistory()钩子来推送到新的路由。我在一个功能组件中声明了useHistory，如下所示： import React, { useState } from 'react';
import logo from '../logo.png';
import axios from 'axios';
import { useHistory } from 'react-router-dom';
function Login() {
const [creds,setCreds] = useState({use
浏览 141提问于2021-04-18得票数 0
2回答
我正在开发一个在ASP.NET Web API中实现的REST API。我们希望支持的一个场景是通过电子邮件地址对一些用户信息进行GET请求。
理想情况下，客户端应该能够执行以下操作：
GET: /api/v1/users/email/your_email@your_domain.com
当我尝试运行这个GET请求时，比如通过浏览器，我就会得到页面。
我做错了什么，导致IIS无法为我的路由运行Web API路由处理程序？如果我尝试请求/api/v1/users/email/your_email，它就会正确路由。
浏览 0提问于2014-05-19得票数 1
嗨，我正面临着useEffect钩子在反应中的问题。下面的代码的工作原理是应该的，但是es建议我需要从useEffect提供依赖项数组中的依赖项。
使用// eslint-disable-next-line react-hooks/exhaustive-deps的工作代码
export default function UsersList() {
const [users, setUsers] = useState<User[]>([]);
const { setError } = useContext(errorContext);
const { isL
浏览 5提问于2020-06-20得票数 3
回答已采纳
我正在使用自定义useHttp钩子从api中获取一些数据，问题是当用户导航到另一个页面并防止奇怪的错误时，我想要中止抓取操作。为此，我在钩子中使用AbortController API，每当组件unmounts被触发时，这个函数就会被触发。但是，当我的组件呈现时，我会得到一个错误，它告诉我操作被中止了！
钩子代码：
import { useEffect , useState , useCallback , useRef } from 'react';
export const useHttpClient = () => {
const [isLoading, se
浏览 7提问于2022-06-25得票数 1
2回答
在我的react应用程序中，我使用react路由器-dom进行路由，有将近5000页(这些页面是基于API动态生成的)，现在我不知道如何为这些动态页面生成一个站点地图。
来自“我的路线”组件的代码段
<Route
path={process.env.PUBLIC_URL + '/genres/:name'}
exact
component={MovieGenre}
/>
<Route
path={process.env.PUBLIC_URL + '/discover/:name'}
exact
component={Di
浏览 2提问于2021-06-24得票数 5
回答已采纳
这就是我根据用户是否登录来重定向用户的方式。我只是检查在这个例子中是否有cookie。 import { Route, Redirect } from "react-router-dom";
import cookies from "js-cookies";
export const PrivateRoute = ({ children, ...rest }) => {
const userSignedIn = () => {
return cookies.getItem("jwt");
};
浏览 35提问于2021-10-10得票数 0
回答已采纳
2回答
为什么fetchData函数是在useEffect中而不是在外部定义的？
链接：
import { useState, useEffect } from 'react'
export default function useFetch(url, options) {
const [data, setData] = useState(null)
const [error, setError] = useState(null)
useEffect(() => {
const fetchData = async () => {
try
浏览 4提问于2020-04-30得票数 11
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
