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();
}

问题列表与此完美配合，但问题编辑不会，并且像主题一样显示错误。以下是 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