Получение реквизита, неопределенного в компоненте, при использовании реквизита рендеринга с маршрутизатором React

Question

Я пытаюсь осуществить сброс пароля, и в настоящее время, когда пользователь щелкает ссылку, отправленную на электронную почту (встроенную с помощью токена и userId), он перенаправляется на страницу обновления пароля. Таким образом, в UpdatePassword компоненте, я получаю реквизиты неопределенными. Вот код.

In App.js

  <Route
    path="/update-password"
    render={({ match }) => (
      <UpdatePassword
        userId={match.params.userId}
        token={match.params.token}
      />
    )}
  />

UpdatePassword - это простой компонент с двумя полями ввода:

import React, { Component } from "react"

class UpdatePassword extends Component {
  constructor(props) {
    super(props)
    this.state = {
      password: "",
      confirmPassword: "",
      isSubmitted: false
    }
  }

  handleChange = event => {
    const { name, value } = event.target
    this.setState({
      [name]: value
    })
  }

  render() {
    console.log(this.props)
    return (
      <div>
        <h2 style={{ textAlign: "center" }}>Update your password</h2>
        <div className="field">
          <p className="control has-icons-left has-icons-right">
            <input
              className="input"
              onChange={this.handleChange}
              name="password"
              value={this.state.password}
              type="email"
              placeholder="Enter new password"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-envelope"></i>
            </span>
            <span className="icon is-small is-right">
              <i className="fas fa-check"></i>
            </span>
          </p>
        </div>
        <div className="field">
          <p className="control has-icons-left has-icons-right">
            <input
              className="input"
              onChange={this.handleChange}
              name="confirmPassword"
              value={this.state.confirmPassword}
              type="email"
              placeholder="Confirm password"
            />
            <span className="icon is-small is-left">
              <i className="fas fa-envelope"></i>
            </span>
            <span className="icon is-small is-right">
              <i className="fas fa-check"></i>
            </span>
          </p>
        </div>
        <button onClick={this.handleSubmit} className="button is-success">
          Submit
        </button>
      </div>
    )
  }
}

export default UpdatePassword

Внутренний маршрут равен router.post("/receive_new_password/:userId/:token", emailController.reveiveNewPassword)

Answer 1

Я думаю, у вас проблемы с match. params может быть undefined. Попробуйте это:

<Route
    path="/update-password"
    render={(prop1, prop2) => {
    const { match } = prop1; 
    console.log(prop1, prop2, match);
    return (
      <UpdatePassword
        userId={match.params.userId}
        token={match.params.token}
      />
    )}
  />