MERN: TypeError: undefined не является объектом (оценка 'this.props.params.id')

Question

Я изучаю MERN, используя «Pro MERN Stack» Васана Субраманяна.Книга хорошая, но с тех пор, как он написал ее два года, часть его кода больше не работает из-за изменений в модулях, которые он использует.У меня недавно возникла проблема с одной частью, которую мне пришлось сильно изменить.Он использует реагирующий маршрутизатор и по какой-то причине останавливает передачу параметров между функциями (я настоящий новичок, поэтому, вероятно, я не совсем понимаю, о чем говорю).ОК, код выглядит следующим образом:

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