javascript - MERN:类型错误:未定义不是对象(评估 'this.props.params.id' )

Question

我正在使用 Vasan Subramanian 的“Pro MERN Stack”学习 MERN。这本书很好，但是由于他写了两年了，由于他使用的模块发生了变化，他的一些代码不再工作。最近，我的一个部件遇到了问题，我不得不对其进行很大的改动。它正在使用react-router，并且由于某种原因它停止在函数之间传递参数(我是一个真正的初学者，所以我可能真的不知道我在说什么)。好的，代码如下:

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

尝试添加匹配:

this.props.match.params.id