TypeError:组件中未定义this.props.match
是一个错误信息，通常出现在React组件中。
这个错误表示在组件中使用了this.props.match，但是该组件并没有定义this.props.match属性。通常情况下，this.props.match是在使用React Router时用于获取路由参数的对象。
要解决这个错误，可以按照以下步骤进行操作：
- 确保你的组件是在使用React Router进行路由管理。如果没有使用React Router，那么this.props.match是无法使用的。
- 确保你的组件是通过路由进行渲染的。在使用React Router时，只有通过路由进行渲染的组件才能够访问到this.props.match对象。如果你的组件没有通过路由进行渲染，那么this.props.match将会是undefined。
- 确保你的组件在路由中正确配置了路径参数。如果你的组件需要使用this.props.match来获取路由参数，那么你需要在路由配置中正确地定义路径参数。例如，如果你的路径是"/users/:id"，那么在组件中可以通过this.props.match.params.id来获取id参数的值。
- 如果以上步骤都没有解决问题，那么可能是你的组件没有正确地传递props。在React中，组件之间通过props进行数据传递。确保你的组件在使用时正确地传递了props，包括this.props.match。
总结起来，TypeError:组件中未定义this.props.match错误通常是由于以下原因导致的：没有使用React Router、组件没有通过路由进行渲染、路由没有正确配置路径参数、或者组件没有正确地传递props。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，满足各种业务需求。详情请参考：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：提供安全可靠、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
相关·内容
1回答
我有这样的代码：
...
import { match, RouteComponentProps } from "react-router";
import * as H from 'history';
interface oneRoute {
path: string;
exact?: boolean;
main: any;
}
interface ITestProps {
id: string;
}
class Test extends React.Component<RouteComponentProps<
浏览 4提问于2017-10-29得票数 3
我在公路上设置了平行线。它们从我的组件出现在控制台中，但我得到了一个“未定义”的错误。
<Router>
<App>
<Switch>
<Route exact path='/data/:param' component={data} />
</Switch>
</App>
</Router>
组件
class Data extends Component {
constructor(pro
浏览 1提问于2020-03-08得票数 0
回答已采纳
2回答
现在我这样做：
constructor(props) {
super(props);
let r = useRouteMatch();
this.path = r.path;
this.url = r.url;
}
但这不起作用，并引发错误:如果在render()中使用url，则未定义url。
该代码在文档中显示：
let {path, url} = useRouteMatch();
它适用于函数式编程，而不是类。如何将这些变量声明为一行？或者别的什么
浏览 2提问于2020-03-25得票数 1
回答已采纳
在我的网络项目中，我试图访问路由参数。
确定的路线：
<Route path="/meeting/:id">
<MeetingDetails />
</Route>
组件已加载，但我无法访问路由参数，因为未定义this.props.match。如何访问路由param id
import React from "react";
export default class MeetingDetails extends React.Component {
constructor(props) {
s
浏览 2提问于2021-01-07得票数 0
回答已采纳
1回答
我正在编写我的第一个react应用程序，我想使用一个开关来显示与路由对应的组件。其中一条路由使用了参数。问题是props中缺少match属性，因此路由匹配似乎不起作用(未插入任何组件)。
当我尝试console.log this.props.match时，它返回未定义。
import { Switch, Route } from 'react-router-dom';
import React, { Component } from 'react';
import Index from './Index';
import Debate fro
浏览 19提问于2019-07-18得票数 1
4回答
我在我的react项目中使用了react-routing-dom V5。我需要通过受保护的路由将道具从App组件(我在那里导入Router)传递给子组件。问题是道具是空的，没有匹配，位置，历史.. **App组件 import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
class App extends Component {
render(){
console.log(t
浏览 39提问于2019-08-29得票数 0
回答已采纳
我正在尝试用MemoryRouter测试一个组件，如带有初始条目设置的React路由器文档中所示，这样我就可以在包装的组件中有params了。
组件示例：
render () {
console.log(this.props.match.params.item)
}
在应用程式中(运作良好)：
<Router>
<Switch>
<Route exact path='/' render={() => (
<Redirect to={`/${guessLocale()}`} />
)} />
浏览 0提问于2018-07-03得票数 6
回答已采纳
我想用这段代码发送一个道具
const CreateActivity = () => (
<AuthUserContext.Consumer>
{authUser =>
<CreateActivityShow match={this.props.match} email={authUser.email}/>
}
</AuthUserContext.Consumer>
)
它给出了以下错误
这个3.道具是未定义的
我需要在this.props.match内部传递url参数，知道我怎么做吗？
浏览 0提问于2018-08-10得票数 0
回答已采纳
在React路由器v6中，我试图创建一个动态SubHeader组件，该组件基于特定的路由或路由参数进行更改。对于上下文，下面是一个精心设计的设置：
export const App = () => {
return (
<BrowserRouter>
<Header>
<TopHeader />
<DynamicSubHeader /> // <-- here
</Header>
<Routes>
<Route
浏览 1提问于2020-04-30得票数 1
我的路线是这样的
<BrowserRouter>
<App>
<Switch>
<Route path="/:locale?" component={Home}/>
</Switch>
</App>
</BrowserRouter>
应用程序组件是
class App extends Component {
componentDidMount() {
if (this.props.match) {
console
浏览 0提问于2018-03-31得票数 1
我在我的父组件中有以下代码： <Route path='/champions/:id' render={(props) => <ChampionDetails {...props} match={this.handleMatch}/>}/> 其中match prop将是从子组件(ChampionDetails)检索数据的函数。我的ChampionDetails (子)组件的一段代码： import React, { Component } from 'react';
class ChampionDetails e
浏览 34提问于2019-01-10得票数 6
回答已采纳
我得到了一个无限的呈现循环，因为isSignedIn的值最初是未定义的。我该怎么解决这个问题？
Container.jsx
class Container extends Component {
componentDidMount() {
this.props.onFetchUserInit();
}
render() {
const { path } = this.props.match;
const isSignedIn = this.props.sessionData.signed_in;
return (
<Switch&
浏览 3提问于2020-03-03得票数 1
我设置了一条路径来呈现单个项目的详细信息，但是它抛出了一个错误，说'this.props.match‘是未定义的。因此不能解构
这是我的代码片段
class ProfilesSinglePage extends Component {
constructor (props) {
super (props)
this.state={
details:''
};
}
render(){
console.log(this.props);
const
浏览 2提问于2021-11-11得票数 1
回答已采纳
1回答
你好，我有一个应用程序，在成功创建新房间后，我想重定向用户。我想将他重定向到URL中带有房间ID的页面，但是我想用这个重定向发送数据到组件状态。
在App.tsx我有
<Route path="/game/lobby/:id" component={LobbyView} />
im从这样的CreateRoom组件重定向
if(this.state.redirect) {
return <Redirect to={{
pathname: "/game/lobby/" + this.state.roomId,
浏览 1提问于2021-03-20得票数 2
回答已采纳
1回答
我有一个react/redux应用程序，它有以下有效的路由：
这两条路线都指向同一个容器组件: ProductContainer。这两个urls之间唯一的区别是当产品id被提供时，应用程序需要从服务器获取一些数据并预先填充一些表单。因此，我需要一些基于url参数的有条件地提供支持的机制。
我可以让它正常工作--但是它很麻烦/不雅:我目前的方法是使用createhistory()对象访问url字符串，并对散列执行一些字符串操作来提取产品id。我想知道是否有一种更清洁、更标准的方式来完成这种行为？
浏览 1提问于2017-10-05得票数 1
回答已采纳
试图从我的url中获取id，以便我可以在fetchData上使用它在componentDidMount上。我还使用它来设置组件中的一些状态，以便在页面上显示信息。然而，ownProps.match和ownProps.params始终以未定义的形式出现。我尝试了很多事情，而我所能想到的就是我的/路由是在thing/:id之前匹配的，它会导致问题吗？
(我可以使用这两种方法，但它们都失败了。)TypeError: this.props.params is undefined TypeError: this.props.match is undefined
以下是我的路线：
export defau
浏览 4提问于2017-11-18得票数 4
回答已采纳
我可能没有正确地处理这个问题，但我遵循了React Router文档中的。在我的例子中，边栏中的一个链接需要有一个嵌套的参数(例如/bubblegum/:brand/nutrition)，这样我的边栏看起来更像这样：
<ul style={{ listStyleType: "none", padding: 0 }}>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/bubblegum"&
浏览 0提问于2019-04-11得票数 1
2回答
我正在尝试制作一个单一的web应用程序。基本上，我试图使用ReactRouter来显示作为路由参数传递的内容。然而，我无法做到这一点。为了检查是否出了什么问题，我决定console.log out this.props.match，但还是什么也没有出现。有人能解释一下是什么问题吗？还有可能绕道而行？
我的密码是-
import React from 'react';
export default class Post extends React.Component {
state = {
id: null
}
componentD
浏览 0提问于2020-04-13得票数 0
回答已采纳
在我的html中，我引用了指令：v-init:url="myurlhere"
data() {
return {
currentPage: 1,
url: '',
news: '',
}
},
directives: {
init: {
mounted(el, binding) {
console.log(binding.value);
this.i
浏览 2提问于2021-07-22得票数 1
我的vue版本: 2.1.10
Vue警告
呈现错误："TypeError:无法获得未定义或空引用的属性“
(在Root>中找到
TypeError:无法获得未定义或空引用的属性“Product”
Vue警告
属性或方法"*this*“不在实例上定义，而是在呈现过程中引用。通过初始化此属性，确保此属性是反应性的，无论是在data选项中，还是对于基于类的组件。见：。
(在Root>中找到)
Vue警告
呈现错误："TypeError:无法获得未定义或空引用的属性'order_id‘“
(在Root>中找到
浏览 0提问于2018-09-29得票数 1
2回答
这个问题把我逼疯了，我得到了一个由create-react-app创建的简单的应用程序，我正在使用React-Router。
联署材料X：
<Router>
<Route path="/pages/:pageId" component={Page} />
</Router>
在Page中，我在componentDidMount上有一个fetch，它在第一次加载路由时正常工作。
例如，我访问：/pages/13，然后它获取页面数据，但是当我打开：/pages/13，然后单击一个链接组件(从React-Router导入)，将我重定向到：/
浏览 1提问于2018-04-27得票数 3
回答已采纳
这是我的Editstudent.js
async componentDidMount() {
const stud_id = this.props.match;
console.log(stud_id);
}
这是我的App.js
<Routes>
<Route exact path="/" element={<Student/>} />
<Route path="/add-student" element={<Addstudent/>} />
<Ro
浏览 0提问于2022-04-18得票数 -1
回答已采纳
我试图设置一个单元测试如下：
import Vue from 'vue'
import ChangeTitleComponent from '@/components/ChangeTitleComponent'
import store from '@/vuex/store'
describe('ChangeTitleComponent.vue', () => {
describe('changeTitle', () => {
var com
浏览 2提问于2017-09-17得票数 0
回答已采纳
现在我在做一个项目，但我无法得到当前的url或基本url的反应。我需要得到url和基本url在反应为主动打开标签时，我在特定的路线。
浏览 8提问于2022-05-04得票数 -1
在Vue 2.0应用程序中，假设我们有组件A、B和C。
A声明、注册和使用B
从A到B可以通过C吗？
就像这样：
<template>
<div class="A">
<B :child_component="C" />
</div>
</template>
在B中使用C。
<template>
<div class="B">
<C>Something else</C>
</div>
</t
浏览 3提问于2017-03-24得票数 64
回答已采纳
在角应用程序中，我无法从我使用dataSource创建的服务中读取。
ERROR TypeError:无法将未定义或null转换为对象错误TypeError:无法读取未定义的属性“getService”
component.ts
import { Component, OnInit } from '@angular/core';
import { RailroadAgreementService } from '../../services/railroad-agreement.service';
import { RRA_ID } from '../.
浏览 1提问于2019-12-03得票数 1
在安装角质材料并在app.module中添加组件之后，我得到了这个错误
TypeError:无法读取未定义.的属性'id‘
浏览 5提问于2020-08-12得票数 1
回答已采纳
我想在通过DatePickers加载的部分视图上使用Telerik DatePickers和IntegerTextBoxes。在之后，我手动地将必需的JavaScript文件添加到ScriptRegistrar中：
Site.Master
.
.
.
<%= Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Compress(true).Combined(true)
.Add("telerik.calendar.js")
浏览 0提问于2010-11-09得票数 1
回答已采纳
1回答
我在App.js上这样做：
<Route path="/discover/:query" component={Discover}/>
然后我尝试访问Discover中的URL参数
componentDidMount() {
alert(this.props.match); // undefined
}
我尝试过许多其他方法，比如：alert(this.match);或alert(match);。它们都是未定义的！
我做错了什么？据我所知，我正在跟踪医生。
我正在运行React版本16.3.2。
编辑:所有的App.js：
import Reac
浏览 9提问于2018-05-08得票数 1
回答已采纳
当我点击一个特定的帖子时，我试图显示与它相关的数据。但是this.props.match.params?.id不会返回id。我通过手动输入id '/expense/61362fcbe355c7474eaa45c7‘来使用URL。然后它工作得很好。有人能帮我解决这个问题吗？
constructor(props) {
super(props);
this.state = {
expense: {},
};
}
componentDidMount() {
const id = this.props.match?.params.id;
浏览 3提问于2021-09-10得票数 0
我的场景如下:我有3个组件: MainComponent、ComponentA、ComponentB
MainComponent是动态负荷ComponentA。ComponentA有一个onClick称为MainComponent.addComponent(ComponentB)的按钮
export class MainLayout
{
constructor(private dcl: DynamicComponentLoader,private elementRef:ElementRef) {
///this will work fine
this.dcl.loa
浏览 7提问于2016-01-11得票数 1
回答已采纳
因此，我有一条错误消息-未定义的TypeError:无法读取未定义的属性(读取“params”)
AddOrUpdateProduct.js
function mapStateToProps(state, ownProps) {
const productId = ownProps.match.params.productId;
const product =
productId && state.productListReducer.length > 0
? getProductById(state.product
浏览 1提问于2022-04-03得票数 1
回答已采纳
我使用的是PrimeFaces 3.5和JSF2.0。我想使用jQuery插件，所以我在我的webapp中包含了jQuery。
<h:head>
<h:outputScript name="js/jquery.min.js" />
<h:outputScript name="js/jquery-ui.js" />
</h:head>
但是，在使用PrimeFaces组件时，我会得到如下所示的未明类型错误：
未定义TypeError:无法读取未定义属性的“长度”
TypeError:对象
浏览 1提问于2013-04-23得票数 12
回答已采纳
有点新的放大。我得到了一个低沉的错误
datastore.ts:416未定义TypeError:无法设置未定义的属性(设置'podcast')
这是我的密码：
“”“
“进口”/附录“；
import {
PodcastCollection
} from './ui-components';
function App() {
return (
<div className="App">
<header className="App-header">
<
浏览 3提问于2022-09-21得票数 1
2回答
我使用的是，我想在特定路径上隐藏一个组件
<NativeRouter history={nativeHistory}>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Footer />
</NativeRouter>
在我的Home组件中，当单击链接时，About组件必须呈现& Footer必须隐藏&对于Footer必须呈现的其余路由。Footer是一个
浏览 0提问于2017-08-29得票数 1
回答已采纳
因此，假设我有一个配置文件页面，它根据路径呈现不同的组件。例如： /profile/posts在配置文件中呈现Posts组件。 /profile/comments在配置文件中呈现Comments组件。 我通常先渲染"/profile"路径的配置文件页面，然后在里面根据上面提到的路由渲染相关的组件。我想做的是，省略在Route components inside Profile中定义的路径的"/profile"部分，只保留剩余的部分。如何在不破坏路由的情况下做到这一点？ 请参阅以下代码中的注释： // App.js
// ...
<Switch>
浏览 56提问于2021-11-17得票数 1
回答已采纳
4回答
遵循，我尝试以编程方式在页面上创建组件的实例。
主要的片段如下：
import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)
然而，我得到了两个错误：
我试图实例化的组件包含对存储的引用，这些引用不起作用："TypeError
浏览 1提问于2018-11-09得票数 6
回答已采纳
我已经从Material v4升级到了v5，现在收到了以下错误：
TypeError: onChangePage不是函数
function handleNextButtonClick(row) {
> onChangePage(row, page + 1);
}
现在看来，onChangePage支柱在TablePaginationActions组件中是未定义的。
浏览 1提问于2021-04-13得票数 2
回答已采纳
在挂载组件时触发ComponentDidMount()，包括在服务器端呈现后对其进行加水处理。
我在网上找到的一个解决方案是检查状态中是否有数据；然而，这需要在每个组件上包含大量代码。其他的解决方案是什么？
componentDidMount() {
// if rendered initially, we already have data from the server
// but when navigated to in the client, we need to fetch
if (!this.state.data) {
this.const
浏览 0提问于2017-10-30得票数 3
3回答
<f7-input ref="input" placeholder="Enter a location" type="text"></f7-input>
mounted(){
var n = this.$refs.input
}
上面写着：
挂载钩子中的错误："TypeError:无法读取未定义的属性‘输入’“
有获得输入值的方法吗？提前谢谢
浏览 6提问于2018-04-18得票数 0
回答已采纳
你好，我正在学习反应js，我遇到了一个问题。当我试图使用react路由器返回到主页时，我会得到以下错误：
未定义TypeError:无法读取未定义属性的“推送”
下面是我的代码，正如您所看到的，我正在调用导航函数：
我的带有路由器的client.js：
如果我将this.props.router.push('/');替换为this.props.history.push('/');，它就能正常工作。有什么问题吗？
浏览 5提问于2016-05-06得票数 12
回答已采纳
我正在看react-admin演示代码，试图从中学习。我注意到了很多次相同的行为:演示代码不等待record加载，也不会得到未定义的异常。我很难理解为什么他们没有得到未定义的异常。例如:在PosterEdit 中，他们只使用如下组件
const Poster = ({ record }) => {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardContent className={classes.content}
浏览 17提问于2020-06-02得票数 0
1回答
我想访问组件的对象，但是方法中的this是对methods: {}对象的引用。
methods: {
getInput: () => {
return this.$refs.input.value
}
}
我试图调用getInput()，但是我得到了一个错误：
未定义的TypeError:无法读取未定义的属性“$refs”。
如何访问组件的对象而不是methods对象？
浏览 0提问于2021-08-25得票数 0
回答已采纳
1回答
所以当我点击FAB的时候，我想让纸对话框显示出来，但是我得到了这个错误，
未定义的TypeError:无法读取未定义的属性“切换”
纸对话
<paper-dialog id="dialog1">
<p>{{item.name}}</p>
</paper-dialog>
纸-FAB
<paper-fab icon="shopping-cart" title="hire" on-click="hire"></paper-fab>
脚本
浏览 2提问于2016-01-28得票数 0
回答已采纳
3回答
我有一个类似于这样的混合体，它有一个请求方法来调用axios和处理错误，等等：
import Vue from 'vue'
import axios from 'axios';
Vue.mixin({
methods: {
request(url, datas) {
//Call axios and return premise
[...]
}
});
我有一家这样的商店
const actions = {
selectEmployees: (store, keywords) =
浏览 1提问于2018-10-02得票数 5
回答已采纳
4回答
我有两个组件：App和Contact。我只想在我正在传递的联系人页面上打印id，但是当我在contact组件中console.log(this.props)时，它显示的是一个空对象。
import React from "react";
import Contact from "./Contact";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class App extends React.Component {
render() {
浏览 0提问于2019-10-15得票数 2
回答已采纳
1回答
我做了一个小的简单的应用程序与最新版本的反应和反应路由器。它正如愿以偿--它是一个样式指南应用程序，允许用户选择要查看的组件，并选择要应用于该组件的品牌。
我使用两个select元素。添加value={props.component}会导致错误：
超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。
<IonSelect
value={props.component}
onIon
浏览 1提问于2019-03-03得票数 1
1回答
我正试图在非路由组件上获取有关当前路由的信息。
Reactive路由器提供了历史记录的单例版本(browserHistory和hashHistory)，您可以从应用程序中的任何地方导入和使用它们。
以前，您似乎可以使用browserHistory，但这似乎不再受支持。我正在使用react-router-redux^4.0.8和@types\react-router-redux^5.0.1。
如何访问当前的路由位置？
浏览 6提问于2018-01-11得票数 2
回答已采纳
1回答
TypeError: navigation.toggleDrawer不是函数。(在'navigation.toggleDrawer()‘中，'navigation.toggleDrawer’未定义)
我已经在抽屉导航中调用了这个函数作为子组件，即使它显示错误，因为切换抽屉无法访问抽屉menu...If，任何人都可以帮助我解决这个问题，这将非常有帮助
浏览 8提问于2021-10-19得票数 0
我得到了TypeError:未定义在React Native中不是一个对象(计算‘navigation.state’)。
const DashboardFooter = ({navigation}) => {
const activePage = navigation.state.index;
return (
<TouchableOpacity
style={styles.tabIconContainer}
onPress={() => navigation.navigate(&#
浏览 16提问于2020-05-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
