Question

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

Index.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是否存在而在Events组件上呈现不同的逻辑。

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

编辑：

我添加了Events组件，这是我需要将userID发送到的组件。当我尝试在控制台中记录{this.props.match.params.userID}时，我收到此错误：无法读取未定义的属性'params'

Answer 1

（还不能写评论，所以我正在写答案）。

请提供有关您尝试拨打{this.props.match.params.userID}的位置的详细信息。

是否在Events，Patients，Home组件中？

如果是，根据React Router v4 docs，match属性在props函数的render参数内“（作为{传入的函数） {1}} render}的道具。

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

尝试做：

props

React Router v4 - 无法访问网址参数

1 个答案: