ПриложениеactJS на Amazon Web Services с переданными значениями

Question

У меня есть приложениеactJS, которое в настоящее время размещено в корзине S3 в Amazon Web Services.Amazon предоставил мне точку входа в мое приложение, предположим, что точка входа

http://myreactjsapp.s3 -website.us-east-2.amazonaws.com /

То, что я хотел бы сделать, это иметь возможность передавать значение в приложение и иметь это значение доступным в приложении.Так, например, я хотел бы сделать что-то вроде этого:

http://401kmobileapp.s3 -website.us-east-2.amazonaws.com /? UserFirstName = Jonathan & userLastName = Small

Затем я хотел бы иметь возможность ссылаться на значение userFirstName и значение userLastName в приложении, чтобы при отображении страницы по умолчанию приложение отображало что-то вроде Welcome Jonathan Small!

Как бы я это сделал?

Спасибо за любые предложения.

Answer 1

Вы можете использовать API URLSearchParams для анализа параметров запроса и перевода их в состояние вашего компонента и использования его для рендеринга.

Пример

class App extends React.Component {
  constructor(props) {
    super(props);

    const urlParams = new URLSearchParams(window.location.search);
    this.state = {
      userFirstName: urlParams.get("userFirstName") || "",
      userLastName: urlParams.get("userLastName") || ""
    };
  }

  render() {
    const { userFirstName, userLastName } = this.state;

    return (
      <div>
        Welcome {userFirstName} {userLastName}
      </div>
    );
  }
}