Вставка задачи и перенаправление в другой компонент

Question

Я пытаюсь вставить задачу. Например, {"name": "todo 1", "description": "selling"}, и я хочу видеть, когда я нажимаю в create, '/ todos / 89324njhe3uj / show', но реальный результат - '/ todos /undefined/show'.

Проблема не в бэкэнде, возможно, в передней стороне.

Это мой пост Todo:

 app.post('/api/todos', async (req, res) => {

     const { name, description} = req.body;

       const todo = new Todo({name, description});


    try {
      let newTodo = await todo.save();

      res.status(201).send(newTodo);
    } catch (err) {
      if (err.name === 'MongoError') {
        res.status(409).send(err.message);
      }

     res.status(500).send(err);
      }
     });

Теперь давайте посмотрим спереди конец. TodoForm.jsx

class TodoForm extends Component {
  componentWillReceiveProps = nextProps => {
    // Load Contact Asynchronously
    const { todo } = nextProps;
    if (todo._id !== this.props.todo._id) {
      // Initialize form only once
      this.props.initialize(todo);
      this.isUpdating= true;
    }
  };

render() {
    const { handleSubmit, loading } = this.props;

    if (loading) {
      return <span>Loading...</span>;
    } 

    return (
       <form onSubmit={handleSubmit}>
         <Field
          name='name'
          type='text'
          component={TextField}
          placeholder='...name'
          label='Name'
        />
        <Field
          name='description'
          rows='8'
          component={TextArea}
          placeholder='...description'
          label='Description'
        />

 <Link className='btn btn-light mr-2' to='/todos'>
          Cancel
        </Link>
        <button className='btn btn-primary mr-2' type='submit'>
          {this.isUpdating ? 'Updating' : 'Creating'}
        </button>
      </form>
    );
  }
}

export default reduxForm({ form: 'todo', validate: validations })(
  TodoForm
);

И мой NewTodo.jsx

 import React, { Component } from 'react';

import { connect } from 'react-redux';
import { Redirect } from 'react-router';
 import { SubmissionError } from 'redux-form';
import { newTodo, saveTodo } from '../../actions/TodoActions';
 import TodoForm from './TodoForm';

class NewTodo extends Component {
  state = {
    redirect: false
  };

  componentDidMount() {

    this.props.newTodo();
  }

  submit = todo => {
    return this.props
      .saveTodo(todo)
      .then(response => this.setState({ redirect: true }))
      .catch(err => {
        throw new SubmissionError(this.props.errors);
      });
  };

  render() {
       const {id} = this.props.match.params;
    return (
      <div>
        <h2>New Todo</h2>

        {this.state.redirect ? (
          <Redirect to= {{pathname: `/todos/${this.props.todo.state.id}/show`, state: {id: this.id}}} />
        ) : (
          <TodoForm todo={this.props.todo} onSubmit={this.submit} />
        )}
      </div>
    );
  }
}

function mapStateToProps(state) {
   return {
    todo: state.todosDs.todo,
     errors: state.todosDs.errors
  };
}

export default connect(
  mapStateToProps,
  { newTodo, saveTodo }
)(NewTodo);

Я использую два маршрута во внешнем интерфейсе: '/ todos / new' -> NewTodo и '/ todos / : id / show '-> ShowTodo. Мое приложение не использует какой-либо маршрут в New Todo. В New Todo я должен заполнить форму, соответствующую TodoForm, и нажать кнопку создания, что является отправкой. Я нажимаю кнопку «Отправить», и он перенаправляет меня на «/ todos /: id / show». ожидаемый вывод: '/ todos / 43jui31423j4j32 / show', но реальный вывод - '/ todos / undefined / show'.

Дополнительная информация о проблеме: Перенаправление на другой компонент с передачей параметра id props по URL