reactjs - React Router v4 - 无法访问 URL 参数

Question

我正在使用 React Router 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>
    );
  }

}

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

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

编辑:

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

Answer 1

(还不能写评论，所以我正在写答案)。

请提供有关您尝试调用{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/>
)} />