Question

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

2018-08-10

6889

reactjs react-router

我是 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()

Answer 1

当您想要使用组件时，您不需要像代码那样的函数，您可以像这样更改它：

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

或者如果您想要这样的函数，请使用渲染函数

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

然后在 this.props.match.params 中您可以访问您的id。

Answer 2

发生这种情况是因为您的组件是 ReactRouter 知道的其他组件的子组件。例如，

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

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

Answer 3

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

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