MERN：TypeError：未定义不是对象（正在评估“ this.props.params.id”）

Question

我正在使用Vasan Subramanian的“ Pro MERN Stack”来学习MERN。 这本书不错，但是由于他已经写了两年了，由于他使用的模块的变化，他的一些代码不再起作用。 最近我有一个问题，我不得不做很多改动。 它正在使用react-router，并且由于某种原因，它停止在函数之间传递参数（我是一个真正的初学者，所以我可能不太了解我在说什么）。 OK，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Redirect, Switch } from "react-router-dom";
import PropTypes from 'prop-types';

import IssueList from './IssueList.jsx';
import IssueEdit from './IssueEdit.jsx';

const contentNode = document.getElementById('contents');
const NoMatch = () => <p>Page Not Found</p>;

const App = props => (
  <div>
    <div className="header">
      <h1>Issue Tracker</h1>
    </div>
    <div className="contents">
      {props.children}
    </div>
    <div className="footer">
      Full source code available at this <a href="https://github.com/vasansr/pro-mern-stack">
      GitHub repository</a>.
    </div>
  </div>
);

App.propTypes = {
  children: PropTypes.object.isRequired,
};

const RoutedApp = () => (
  <App>
    <Router>
      <Switch>
        <Route exact path="/" render={() => <Redirect to="/issues" />} />
        <Route exact path="/issues" component={IssueList} />
        <Route exact path="/issues/:id" component={IssueEdit} />
        <Route path="*" component={NoMatch} />
      </Switch>
    </Router>
  </App>
);

ReactDOM.render(<RoutedApp />, contentNode);

if (module.hot) {
  module.hot.accept();
}

IssueList可以完美地解决这个问题，但是IssueEdit不能，并且在主题中显示错误。 这是IssueEdit的代码：

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';

export default class IssueEdit extends React.Component {
    // eslint-desable-line
    render() {
        return (
            <div>
                <p>This is a placeholder for editing issue {this.props.params.id}.</p>
                <Link to="/issues">Back to issue list</Link>
            </div>
        );
    }
}

IssueEdit.propTypes = {
  params: PropTypes.object.isRequired,
};

我不知道如何解决它，因此{this.props.params.id}将正确显示。

Answer 1

尝试添加match ：

this.props.match.params.id