Блог

Главная - Вопросы по программированию - Как получить параметр из url в react js?

Как получить параметр из url в react js?

#javascript #html #reactjs

#javascript #HTML #reactjs

Вопрос:

Я очень новичок в react, и у меня возникли проблемы с доступом к параметру из URL. Я искал много решений, но я продолжал получать ту же ошибку «Uncaught TypeError: не удается прочитать свойство ‘params’ неопределенного». Как я могу получить доступ к параметру из url в компоненте reactjs?

В App.js

 render() {
  return (
    <Router>
      <ResetPassword path="/reset-password/:token" />
    </Router>
  )
}

В ResetPassword.js

 import React, { Component } from "react";

class ResetPassword extends Component {
  componentDidMount() {
    const { token } = this.props.match.params.token;
    console.log(token);
  }

  render() {
    return (
      <div className="resetPassword">
        <div className="change__container">
          <form>
            <h1 id="changePassword__message"></h1>
            <input
              type="password"
              name="password"
              placeholder="password"
              className="change__textInput"
              required
            />
            <input
              type="password"
              name="passwordTwo"
              placeholder="confirm password"
              className="change__textInput"
              required
            />
            <input type="submit" value="Submit" className="change__btnInput btn" required />
          </form>
        </div>
      </div>
    );
  }
}

export default ResetPassword;

Ошибка
Ошибка неперехваченного типа: не удается прочитать свойство ‘params’ неопределенного

Комментарии:

1. Это означает, что вы неправильно отправляете параметры компоненту ResetPassword, поэтому, когда компонент монтируется, параметров нет. Проверьте, как вы устанавливаете:token, поскольку ошибка исходит оттуда

Ответ №1:

Предполагая, что вы используете react-router, вы можете попробовать это:

 import { useParams } from "react-router";
const { token } = useParams();

Ответ №2:

вы должны добавить компонент в качестве реквизита для доступа к совпадению

 import { Route } from "react-router-dom";

<Route
 path="/reset-password/:token"
 component={ResetPassword}
/>

или, если вы хотите передать пользовательские реквизиты, вы можете использовать render prop:

 <Route
 path="/reset-password/:token"
 render={(props) => <ResetPassword {...props} myProp={"foo"} />}
/>

А для чтения токена вы можете сделать один из следующих способов:

 const { token } = this.props.match.params;
const token = this.props.match.params.token;