reactjs React Router v4 -无法读取未定义的属性“params”

xn1cxnb4 于 2023-02-15 发布在 React

关注(0)|答案(5)|浏览(106)

我是React的初学者。我只需要在页面加载时从URL中获取路径参数。我的URL如下。

http://localhost:3000/explorer/test/111

我已经设定了路线如下，

<Route
    exact path="/explorer/test/:id"
    component={() => <BlockPage />}
  />

然后在<BlockPage />组件中，我需要在组件加载时获取:id的值，因此，我添加了以下代码段来获取id，但它给了我标题中的错误。

import React, { Component } from 'react';
import NavigationComp from './Navigation';
import { withRouter } from 'react-router-dom';

const BlockPage = () =>
   <div>
      <NavigationComp/>
      <BlockData />
   </div>

class BlockData extends Component {
    componentDidMount() {
       console.log(this.props.match.params.id);
    }

    render(){
        return(.....)
    }
}

export default withRouter(BlockPage);

我犯了什么错误？有人能给我解释一下吗？我的目标是从URL中获取111值到componentDidMount()中

reactjs

来源：https://stackoverflow.com/questions/51780250/react-router-v4-cannot-read-property-params-of-undefined

5条答案

按热度按时间

cbwuti441#

当你想使用组件，你不需要像你的代码功能，你可以改变它像它：

<Route
exact path="/explorer/test/:id"
component={<BlockPage />}
/>

或者如果你想要一个像这样的函数，使用render函数

<Route
exact path="/explorer/test/:id"
render={(props) => <BlockPage {...props} />}
/>

那么在this.props.match.params中您可以访问您的ID。

赞(0）回复(0）举报 2023-02-15

0pizxfdo2#

这是因为你的组件是ReactRouter知道的其他组件的子组件。

<BrowserRouter>
        <Switch>
            <Route path="/Feedback">
        <Switch>
<BrowserRouter>

在上述路由定义中，反馈组件中的匹配对象不为空，但如果我们在反馈中有其他组件并试图访问它，则会出错。

赞(0）回复(0）举报 2023-02-15

bvjxkvbb3#

https://stackoverflow.com/a/57628327/12378703这个工作得很完美...试试这个

<Route
exact path="/explorer/test/:id"
render={(props) => <BlockPage {...props} />}
/>

赞(0）回复(0）举报 2023-02-15

aiazj4mn4#

这解决了我的问题：

<CPAroute exact path="/advcampaigns/:id" component={AdvCampaigns}/>

class AdvCampaigns extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activePage: 1
        };
    };
    componentDidMount() {
        console.log(this.props.**computedMatch**.params.id);
    }
}

赞(0）回复(0）举报 2023-02-15

vcirk6k65#

我也遇到了同样的问题。尝试了上面所有的解决方案，但没有工作。然后我只是控制台日志this.props

const productName = this.props.params.<YOUR_DYNAMIC_URL>;

此.props中没有匹配项

它起作用了，不知道是怎么起作用的，但它起作用了。可能对其他人有帮助。

赞(0）回复(0）举报 2023-02-15

我来回答

reactjs React Router v4 -无法读取未定义的属性“params”

5条答案

相关问题

热门标签

最新问答