React Router v4 - 无法访问 URL 参数

Question

我正在使用反应路由器 v4，由于某种原因我不能使用 URL 参数。这是我的代码

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

App.js

...
render() {

    return (
      <div className="App">
        <Switch>
          <Route exact path="/" render={() => (
            <Home ...props />
            )} />
          <Route path="/events/:userID?" render={() => (
            <Events ...props/>
          )} />
          <Route path="/patients" render={() => (
            <Patients ...props />
            )} />
        </Switch>
      </div>
    );
  }

活动

import React, { Component } from 'react';

export default class Events extends Component {

  constructor(props) {
    super(props)
    this.state = {

    };
  }


  render() {

    console.log(this.props.match.params.userID);

    return (
      <div>

      </div>
    );
  }

}

我正在尝试将“用户 ID”设置为可选参数，并根据用户 ID 是否存在在事件组件上呈现不同的逻辑。

但是，当我尝试调用 {this.props.match.params.userID} 时，我总是未定义。

编辑：

我添加了事件组件，这是我需要将用户 ID 发送到的组件。当我尝试在控制台中记录 {this.props.match.params.userID} 时出现此错误：无法读取未定义的属性“参数”

Answer 1

（还不会写cmets，所以我在写一个答案）。

请提供有关您尝试拨打{this.props.match.params.userID}的更多信息。

它是否在Events、Patients、Home 组件之一内？

如果是，根据 React Router v4 docs，match 属性在 render 函数的 props 参数“内部”（作为 render 属性传入的函数 Route） .

您省略了 props 参数，而是传入了从父作用域（如果有）继承的 props。

尝试做：

<Route path="/events/:userID?" render={(props) => (
  <Events ...props/>
)} />