Soy un desarrollador de React que es nuevo en Flask. Me gustaría enrutar el backend con Flask y construir el frontend con React. Mi primer andamio se ve así:
Estructura de carpetas:
react-flask-app -api -app.py -public -index.html -src -pages -Home.js -Page1.js -components -Navbar.js -App.js
Aplicación.py:
from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('../public/index.html')
Navbar.js:
const Navbar = () => { return ( <> <a href='/'>Home</a> <a href='/page1'>Page 1</a> </> ) };
Inicio.js:
import Navbar from '../components/Navbar'; const Home = () => { return ( <> <Navbar /> <div>Homepage</div> </> ) }
Página1.js
import Navbar from '../components/Navbar'; const Page1 = () => { return ( <> <Navbar /> <div>Page 1</div> </> ) }
Cuando ejecuto la aplicación React, puedo cambiar entre http://localhost:3000/
y http://localhost:3000/page1
haciendo clic en los botones de la barra de navegación, pero no muestra la página 1, ya que aún no configuré el enrutamiento. .
Mi pregunta es, sé que Flask se puede usar para enrutar, ¿cómo puedo usar Flask para enrutar y vincular a cada página en este caso?
Para indicarle a reaccionar al proxy cualquier solicitud a Flask, agregue un campo de proxy
a su package.json
, por ejemplo
"proxy": "http://localhost:5000",
Luego use ajax
, fetch
desde dentro de sus componentes para acceder a su API.
Se puede encontrar más información en Proxying en desarrollo