React不能使用useParams值
是因为useParams是React Router库中的一个钩子函数，用于获取URL中的参数值。而React本身并不提供这个钩子函数，所以不能直接在React组件中使用useParams。
解决这个问题的方法是在React组件中使用React Router库，并在路由配置中定义参数。然后可以使用useParams钩子函数来获取URL中的参数值。
以下是一个示例：
- 首先，安装React Router库：
npm install react-router-dom- 在路由配置中定义参数：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<Router>
<Switch>
<Route path="/users/:id" component={UserDetail} />
</Switch>
</Router>
);
};- 在组件中使用useParams获取参数值：
import { useParams } from 'react-router-dom';
const UserDetail = () => {
const { id } = useParams();
return <div>User ID: {id}</div>;
};在上面的示例中，我们定义了一个路由/users/:id，其中:id表示参数值。然后在UserDetail组件中使用useParams钩子函数来获取参数值，并将其显示在页面上。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
当我试图获得'postId它显示未定义‘的值时，当我试图获得Post组件时，它显示“由于props.posts是未定义的而不能重构属性标题”，我没有得到它有什么问题。Github链接是"“。
import React from 'react';
import { useParams } from 'react-router-dom';
import FakeData from '../FakeData/FakeData';
import Post from '../Post/Post';
const PostDe
浏览 1提问于2020-11-30得票数 0
回答已采纳
我希望在useParams()内部传递createContext()的数据，以便在不同的组件中使用数据
登录组件：-
import React,{createContext} from 'react';
import {useParams} from 'react-router-dom';
export const Context = createContext(companyName);
function Login(){
const {companyName} = useParams();
return(
<div>//some
浏览 1提问于2022-08-19得票数 0
我使用的是“react router”："^4.2.2“，但是useParams不能工作，我该怎么办呢？
import { useParams } from 'react-router-dom';
import DATA from '../Data';
const ProductDetail = () => {
{/* Now we need a product id which is pass from the product page. */}
const proid = useParams();
const proD
浏览 12提问于2021-12-07得票数 -1
我正在使用酶的浅层方法来测试一个组件，该组件使用useParams钩子从URL参数中获取ID。
我试图模拟useParams钩子，这样它就不会调用实际的方法，但它不起作用。我仍然得到TypeError: Cannot read property 'match' of undefined，所以它调用实际的useParams，而不是我的mock。
我的组件：
import React from 'react';
import { useParams } from 'react-router-dom';
export default () =>
浏览 68提问于2019-11-16得票数 19
所以在尝试了这段代码之后，我一直得到了太多的重呈现错误.我不能立即在状态上添加data.results，因为它在乞讨时没有定义。
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import NotFound from './NotFound';
const Gender = ({ data }) => {
const { gender } = useParams();
const [people,
浏览 2提问于2022-01-24得票数 0
1回答
使用React编辑/更新输入字段
、、、、
我是react的新手，在用数据库中的对象值预填充值后，我正在尝试编辑输入字段，那么如果value是value={data.info}，我应该在onChange上放什么？因为我不能输入或更改初始值。我看过很多教程，除了这个。道具让我很困惑
import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import useAsync from '../useAsync';
export default function Details()
浏览 2提问于2021-03-12得票数 0
我正在构建一个我希望用react-router-dom动态路由的网页，而useParams()在路由结束的最后一个页面上不保存传入值。
以下是我的路线：
import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@mui/material/CssBaseline";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
浏览 4提问于2022-02-13得票数 0
我正在使用react-router-dom : 6.4.2和react : 18.02.0
对于详细信息页，我使用useParams()从url获取id，以打开当前用户页。
当我切换到下一个用户页面时，使用
<Link to={`/users/${Number(id) + 1}`}>Next User</Link>
，我从useparams获得的id会更改，但是useEffect不再工作，即使我将id连接到useEffect。
我用console.log( id )检查id，它改变了。为什么useEffect不能工作？我哪里做错了？
Users.js
import Re
浏览 7提问于2022-10-26得票数 1
回答已采纳
1回答
我试图用react-router-dom的useParams中提供的id过滤来自上下文的传入状态数组。基本上，状态转到组件，并在组件中进行过滤： import React, { useContext } from 'react';
import { Link, useParams } from 'react-router-dom';
import { DetailContext } from '../store/DetailContext';
export default function SelectedMovie() {
const
浏览 16提问于2019-12-21得票数 2
对于react路由器v5，为了指定useParams的结果类型，我使用了：
const { param1, param2 } = useParams<{ param1: string, param2: string }>();
我如何使用react路由器v6来做到这一点？
我无法知道如何键入多个参数(例如：useParams<"param1">())，也无法知道如何将param键入为string而不是string | undefined (参见)。
浏览 1提问于2021-11-16得票数 4
2回答
我有一个从IndexedDB获取一些数据的React组件，这是一个异步任务，它使用由useParams钩子传入的url中的id，假设id = 1。当我单击示例中的链接时，id变为2，但此时没有发生任何事情，该组件不会重新呈现。 我需要做些什么才能让它工作？我只是不明白为什么它现在不能工作。有没有人能开导我？ import React, {useState} from 'react';
import { Link, useParams } from "react-router-dom";
import { useAsync } from 'react-a
浏览 10提问于2020-04-24得票数 1
回答已采纳
--我在redux中使用“reselected”库来获取数据。我想获取基于useParams()钩子的数据，然后将其作为ownProps传递到mapStatetoProps中，然后传递给作为选择器的selectionCollection函数，并接受useParams()的值。显然，它不承认useParams()为ownProps，最终返回未定义的结果。顺便说一句，如果我在selectionCollection('someString)中传递一个字符串，我将接收数据，但不使用useParams()钩子。我确实收到了useParams value successfully，但不能在mapS
浏览 2提问于2021-12-24得票数 2
回答已采纳
我不明白为什么它给了我这个错误什么时候，这是因为我使用的反应路由器v6。能不能有人看看这个，看看我是不是漏掉了什么。以下是代码：
代码：
import { useParams, useMatch, Route, Routes, BrowserRouter as Router } from 'react-router-dom';
const {id} = useParams();
const [book, setBook] = useState(null);
const match = useMatch();
<Router>
<Ro
浏览 4提问于2022-07-30得票数 3
回答已采纳
从升级到useParams ()中使用的版本4后，我得到了一个useParams错误。
"typescript": "^4.0.2"
import { useParams } from 'react-router-dom';
const { sumParams } = useParams();
Property 'sumParams' does not exist on type '{}'.
该项目运行良好，只有在升级之后才会引发错误。
浏览 4提问于2020-08-30得票数 67
回答已采纳
我试图从URL中获取id，这样我就可以从API中得到一个特定的帖子，以便返回它。我不能使用Class组件这样做，因为useParams只与函数一起工作。我试图将数据放入变量post中，但它也不起作用。
import { useParams } from "react-router-dom";
import axios from "axios";
const Post = () => {
let params = useParams();
let post = null;
axios.get('https://jsonpla
浏览 21提问于2022-01-10得票数 0
回答已采纳
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
回答已采纳
我的组成部分如下：
import { VFC } from 'react';
import { useParams } from 'react-router-dom';
export const MyComponent: VFC = () => {
const { sourceTemplate } = useParams();
return (
<div>
<p>
<b>{sourceTemplate}</b>
<
浏览 10提问于2022-05-26得票数 1
BlogDetailsPage.js
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
const BlogDetailsPage = (props) => {
const { id } = useParams();
return <div>Blog Details: {}</div>;
};
const mapStateToProps = (state, props) => {
const
浏览 15提问于2022-05-22得票数 2
回答已采纳
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useGlobalContext } from "../context";
const SingleTvShow = () => {
const { id } = useParams();
const [details, setDetails] = useState({});
const { imgUrl } = u
浏览 8提问于2021-06-13得票数 1
回答已采纳
它是HomePage组件的ReactJS
import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate,useParams } from 'react-router-dom';
import { Main } from '../components/Main';
import { Controls } from &#
浏览 4提问于2022-06-30得票数 1
回答已采纳
1回答
我想将id参数传递给showdesc函数，但它没有被传递。有谁能帮忙吗
app.js有一台路由器
<Router>
<Route exact path="/">
{/*sets the header to display searchbar*/}
<Header isSearchBar={true} handleOnChange={change} />
<ShowCards cards={movies} last
浏览 3提问于2021-07-14得票数 0
2回答
我在关注this video (“使用ReactJS和GraphQL的JWTUser会话...”)在this time的时候，他从react-router-dom库中解构了useParams()方法。 在我的例子中，这不起作用，因为我得到了这个错误： ? 这是此时的全部代码： import React, { useState, useContext } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import { useConfirmMutation }
浏览 28提问于2020-10-25得票数 11
回答已采纳
import axios from 'axios';
// const usersUrl = 'http://localhost:3003/users';
const usersUrl = 'http://localhost:8020/users';
export const getUsers = async (id) => {
id = id || '';
return await axios.get(`${usersUrl}/${id}`);
}
export const addUser = asy
浏览 2提问于2022-04-18得票数 0
我正在尝试使用useParams钩子从路由中获取一个值，并在我的页面的异步处理程序函数中使用它，该函数还使用了useEffect和useState。
我注意到我的页面工作正常，直到引用了从useParams获得的值(UseParams)。一旦在placeId中引用了fetchPlaces，就会得到以下错误：
React Hook useEffect has a missing dependency: 'fetchPlace'
我不明白发生了什么--为什么我一引用useParams钩子设置的值，它就会失败
import React, { useEffect, useState }
浏览 7提问于2022-02-16得票数 1
2回答
我从useParams收到了一个url param。我想使用mapStateToProps将它传递给选择器。
collection.component.jsx
import { useParams } from "react-router-dom";
import { connect } from "react-redux";
import { selectShopCollection } from "../../redux/shop/shop.selectors";
import './collection.styles.scss&
浏览 9提问于2021-12-15得票数 2
回答已采纳
1回答
如何使这三个params 1项(例如let {productCode，value，vender} =)。
我已经宣布了。但我想把它们当作道具送到我的手推车里。
import React from "react";
import "bootstrap";
import { useParams } from "react-router-dom";
function ItemDetail(props) {
const params = useParams();
let productCode = params.productCode; //
浏览 5提问于2022-04-19得票数 0
回答已采纳
const loadData = async () => {
debugger
const resp = await axios.get(`http://192.168.0.118:8080/conceptToCourse`);
setData(resp.data);
JSON.stringify(resp.data)
console.log(resp.data)
};
useEffect(() => {
loadData();
},[]);
let optionItems = data.map((item) =&g
浏览 10提问于2022-11-15得票数 0
我正在使用带有TypeScript的react-router v5.1，并具有以下路由配置：
<Router basename="/" hashType="slash">
<Switch>
<Route path="/token/:tokenName">
<TokenPage />
</Route>
</Switch>
</Router>
我尝试使用useParams钩子访问组件中的url参数
浏览 0提问于2019-11-28得票数 44
回答已采纳
4回答
有些人能通过我的代码，看看我做了什么错误。
React与Axios代码
import React, { useState, useEffect } from "react";
import { useParams, Outlet } from "react-router-dom";
import axios from "axios";
export default function Agent() {
const [Agent, setAgent] = React.useState();
const agentid = use
浏览 9提问于2022-03-22得票数 1
我有一个组件，它使用react路由器-dom的useParams钩子来获取params。
它在我的组件中用作：
/ Child.tsx
const Child = () => {
const {id} = useParams();
return <div>Child!</div>
}
在编写单元测试时，我在挂载组件时面临上述错误。
我尝试过的就是像这样嘲弄useParams：
jest.mock('react-router-dom', () => ({ /// This is at top level afte
浏览 6提问于2022-04-26得票数 0
回答已采纳
1回答
我试图根据URL中给出的路由动态地呈现React组件。
画布/index.tsx
export { default as CardGroup } from "./cards.example";
src/App.tsx
import React from "react";
import {
useParams
} from "react-router-dom";
import * as Canvas from "./canvas";
const App: React.FC = () => {
const par
浏览 1提问于2022-08-07得票数 1
回答已采纳
1回答
我有一个示例代码：
function example() {
const { id } = useParams();
const [comments, setComments] = useState([]);
useEffect(() => {
customClass.getComments(id);
})
}
customClass.getComments所需的id (数字)，所以我有错误：
类型“未定义”不能指定为“数字”。
好的，我正在检查id是否是未定义的：
function example() {
const { id
浏览 0提问于2022-09-01得票数 0
回答已采纳
我正在从事一个react项目，并试图用react-router useParams展示产品的更多细节，但我一直得到错误'Cannot destructure property 'title' of 'product' as it is undefined。
这是单个产品的代码
import React from "react";
import products from "../data2";
import { Link, useParams } from "react-router-dom";
cons
浏览 13提问于2022-08-31得票数 1
回答已采纳
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
我已经尝试了所有的堆栈溢出解决方案，然而，没有运气。有人能说出html DOM中的问题所在吗？
错误：
错误:输入是一个空元素标记，不能有children，也不能使用dangerouslySetInnerHTML。
import React from 'react'
import { useParams } from 'react-router';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button, FormGroup, FormControl, FormText
浏览 10提问于2021-10-19得票数 0
我使用：
import { Link } from "react-router-dom";
我传入多个参数，如下所示：
<Link to={`/tech/${data.foo}${data.bar}`}>{data.you}</Link>
我尝试使用useParams访问传递的参数，如下所示：
let { foo } = useParams<{foo:string}>();
let { bar } = useParams<{bar:string}>();
我可以访问foo，但是如果我console.log它，bar会显示undef
浏览 1提问于2020-11-18得票数 0
在Product.js中单击产品:时，下面的代码无法获得特定的数据：
<Link to={`/product/${item.id}`}>
<p className='product_title'>{item.title}</p>
</Link>
在App.js中
<Route path='/product/:id'>
<Header />
<DetailProductPage />
</Route>
浏览 4提问于2022-03-29得票数 0
回答已采纳
我有一条路线
<Route path="/search/:slug"><SearchPage /></Route>
在我的反应路由器。SearchPage是一个使用react-router-dom提供的useParams()钩子的组件。
// SearchPage.js
import React from 'react';
import { useParams } from 'react-router-dom';
export function SearchPage(props) {
const {
浏览 1提问于2020-12-22得票数 5
回答已采纳
2回答
我正在使用Formik创建一个表单。我按照下面的模式创建了我的表单：
现在，我想使用useParams react钩子()的结果作为onSubmit函数的输入。
这是Formik文档中的onSubmit部件：
onSubmit={async (values) => {
await new Promise((r) => setTimeout(r, 500));
alert(JSON.stringify(values, null, 2));
}}
我试着添加了这一行：
onSubmit={async (values) => {
await new Pr
浏览 11提问于2022-04-05得票数 2
回答已采纳
2回答
我正在努力学习如何在我的React项目中使用TypeScript，但是我遇到了使用React路由器useParams()时遇到的问题。
我是这样进口的：
import { useParams } from 'react-router-dom'; // import useParams
我曾经访问JavaScript中的一个特定的url参数：
const params = useParams();
console.log(params.gameId); // trying to access parameter gameId
但是现在使用TypeScript，我得到了错误消息:
浏览 0提问于2021-02-17得票数 1
回答已采纳
当我从列表中编辑一个名称时，我一直遇到CRUD应用程序的问题，它会引发一个错误"TypeError:无法读取未定义的属性(读取' name ')“。
它似乎起源于我输入字段中的"value={selectedUser.name}“，但是当我删除它时，应用程序会编译，但我根本不能更改该字段--输入时什么都不会发生。任何帮助都是非常感谢的！
import React, { useState, useContext, useEffect } from 'react'
import { GlobalContext } from '../conte
浏览 9提问于2022-05-20得票数 1
回答已采纳
页脚必须显示不同的CTA，这取决于用户是在主页上还是在产品页上。产品页面是一个单独的页面，它呈现主页上所选项目的产品信息，我的方法是使用useParams()，并在page.id (来自数据文件)和pageID之间创建关联。 我认为我可以为页脚做同样的事情，但我得到了一个错误，声称所有东西都是未定义的，从字面上看，所有东西都是未定义的。这是我的页脚组件。如您所见，我正在从data文件夹中导入页脚数据，名称为"pageItems"： import React from 'react';
import { useParams } from 'react-r
浏览 14提问于2020-10-20得票数 2
3回答
无法解析符号useParams
、、、、
我正在创建一个在使用WebStorm时使用react的应用程序。我正在尝试使用react路由器-dom useParams.我已经将5.1.2作为一个依赖项，但是useParams在import语句中是灰色的。当我悬停在useParams上时，它会说“无法解析符号useParams”。我还试图导入开关，并收到了类似的消息“无法解决符号切换”。更不寻常的是，Link是从导入的。
浏览 1提问于2020-02-26得票数 4
我正在尝试加载一个基于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
我不能呈现来自useContext的道具，因为它在需要的对象之前返回未定义的。我似乎找不到解决问题的办法。
这是我试图呈现的子元素：
const Reviews = ({reviews}) => {
return (
<div className={styles['review__card']}>
{reviews.map((review) => {
return(
<div className={styles['review__
浏览 5提问于2022-01-15得票数 0
我是一个初学者javascript开发者。我正在尝试创建一个组件，用于使用本地存储将产品添加到使用React的购物车中。我设法通过点击按钮来注册我的产品id，但我不能在一次以上订购的产品上增加数量。这是我的作曲家：
import React from 'react';
import {useParams} from 'react-router-dom';
function AddToBasket() {
const id = useParams().id;
let cartProduct = [];
let cartQty = [];
function
浏览 0提问于2020-03-14得票数 0
import React from 'react';
import { useParams } from 'react-router-dom';
interface IParams {
id: string;
}
export const MyRestaurant = () => {
const { id } = useParams<IParams>();
return <h1>My Restaurant</h1>;
} 当我尝试获取params时，这会抛出一个错误。错误是： Untyped
浏览 50提问于2021-02-07得票数 0
为什么react router v6 useParams返回属性可能为“undefined”的对象？ 在下面的代码中，我的集成开发环境指示为const slug: string | undefined。 const { slug } = useParams<"slug">(); 这是因为Params type definition /**
* The parameters that were parsed from the URL path.
*/
export type Params<Key extends string = string> =
浏览 95提问于2021-11-16得票数 6
回答已采纳
因此，在我的代码中，setData工作得很好，并将获取的数据提供给我的状态。然而，它不工作在第一次渲染。但是如果我更改代码中的内容，网站将再次呈现，并且国家名称将以我想要的方式出现在屏幕上。
但是这个错误不断出现：Uncaught :无法读取未定义(读取“公共”)的属性
import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
function Country() {
const { countryName } =
浏览 9提问于2022-08-21得票数 -1
回答已采纳
我想得到useParams值，但是我得到了一个未定义的值.我不知道为什么，因为我在使用path='/investment/:id'中的params id
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import AdminLayout from 'layouts/Admin
浏览 0提问于2021-05-19得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
