• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

173
Views
How to use Flask to route with a React app?

I'm a React developer who's new to Flask. I'd like to route in backend with Flask and build frontend with React. My first scaffold looks like this:

Folder structure:

react-flask-app
 -api
   -app.py
 -public
   -index.html
 -src
   -pages
     -Home.js
     -Page1.js
   -components
     -Navbar.js
   -App.js

App.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>
        </>
    )
};

Home.js:

import Navbar from '../components/Navbar';

const Home = () => {
    return (
        <>
            <Navbar />
            <div>Homepage</div>
        </>
    )
}

Page1.js

import Navbar from '../components/Navbar';

const Page1 = () => {
    return (
        <>
            <Navbar />
            <div>Page 1</div>
        </>
    )
}

When I run the React app, I can switch between http://localhost:3000/ and http://localhost:3000/page1 by clicking the Navbar buttons, but it does not display Page1, since I've not set routing yet.

My question is, I know Flask can be used for routing, how can I use Flask to route and link to each page in this case?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

To tell react to proxy any requests to Flask, add a proxy field to your package.json, e.g

"proxy": "http://localhost:5000",

Then use ajax, fetch from within your components to access your API.

More Information can be found in Proxying in development

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error