Как запускать скрипты python по нажатию кнопки в React?

Я не знаю, как запустить .py файл по нажатию кнопки в ReactJS. Все, что я хочу, это получить данные, созданные .py файлом с помощью flask при нажатии на кнопку в React приложении. Я установил ссылку на эту кнопку, которая будет перенаправлять на другую веб-страницу, на которой я хочу отобразить полученные данные. Приложение React и .py файл находятся на одной машине. Я понятия не имею, как это сделать. Мой файл app.js в приложении React работает на "http://localhost:3000"

const onClickHandler = () => {
//fetching the data from the server  localhost:5000/page_name
  const url = "http://localhost:5000/user";
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");

 
    try {
      const res = await fetch(url);
      const data = await res.json();
      console.log(data);
      setName(data.name);
      setPassword(data.password);
    
    } catch (error) {
      console.log(error);
    }
  };

  return(
    <div>
    <button onClick={onClickHandler}>Click me</button>
        {name}
    {password}
    </div>
  );

Мой .py файл запускается на "http://localhost:5000/my_link"

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/data',methods=['GET', 'POST'])
def my_link():
  print("I got Clicked")
  return {'name': "geek", "password": "This is PWD"}
  

if __name__ == '__main__':
  app.run(debug=True)

Пожалуйста, помогите мне с этим. Заранее спасибо .

Вы немного не понимаете, как работает api.

Во-первых, вы должны джсонифицировать ваши данные, поэтому оберните ваш возврат с помощью jsonify.

return jsonify({'name': "geek", "password": "This is PWD"})

>

Затем, прежде чем делать что-то фантастическое, зайдите в конечную точку /data и посмотрите, есть ли там данные... должны быть, или проверьте свой код.

Если все работает, то попробуйте :

   fetch('http://localhost:5000/data')
  .then((response) => response.json())
  .then((data) => console.log(data));

Должны возвращаться некоторые данные.

Прежде чем переходить на React, вы должны понять api и библиотеку fetch.

Вернуться на верх