Перенаправление на другой компонент с передачей параметра id props по URL

Question

Когда я вставляю задачу в форму Todo, я хочу получить идентификатор продукта todo, когда нажимаю на кнопку «Создать» и перенаправляю на URL из компонента «Показать продукт».

Это мой код в новом Todo.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() {
     return (
       <div>
        <h2>New Todo</h2>

        {this.state.redirect ? (
           <Redirect to={{
            pathname: `/todos/${this.props.todo.state.id}/show`,
            state: {  id: this.props.match.params}
          }} />
        ) : (
      <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 / s31uju1uj1jujw11ij / show', но это реальный вывод: '/ todos / undefined / show'

Что не так?

Answer 1

Убедитесь, что вы передаете здесь свой идентификатор

<Redirect to={{
            pathname: `/todos/${this.props.todo.state.id}/show`,
            state: {  id: this.props.todo.state.id }   

Я думаю, это может быть

     { this.props.todo.id } // change it as per your id 
     state: {  id: this.props.todo.id }

Попробуйте войти

 render() {
     console.log('todo', this.props.todo); // add log and check you are getting your todo 
     return (