3

I have an existing Python Flask backend that is pulling information from various sources. I wrote a separate React frontend to serve this data on. Now, I am trying to integrate the two. I want to run the React frontend on the Flask backend. I tried using this as a skeleton: https://github.com/angineering/FullStackTemplate

Now, I'm trying to get my React-Router working with that solution, but the routes are going nowhere since Flask does server-side route rendering. I tried using this catch-all as defined here: Flask and React routing

The catch all works to display "path:home" or "path:management" or whatever. But not the component. In the comment on the accepted answer, it appears another user ran into the same issue as me with rendering components, and fixed it using static urls with "/public". However, in this GitHub project I'm using, they use a "static" folder and a "server" folder and I don't think I'm routing it correctly.

server.py:

from flask import Flask
app = Flask(__name__, static_url_path="/static", 
static_folder="../static")

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return app.send_static_file("index.html")

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

App.jsx

import React, { Component } from "react";
import Test from './components/Test/Test.js';
import TestPage from './pages/TestPage/TestPage.js';
import Main from './components/Main/Main.js';

import '../css/styles/index.css';

require('../css/fullstack.css');

class App extends Component {
    constructor(props) {
        super(props);
    }

    render () {
        return (
            <div>
                <Test />
                <TestPage />
                <Main />
            </div>
        );
    }
}

export default App;

Main.js

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import TestPage from '../../pages/TestPage/TestPage.js';

class Main extends Component {
  constructor(props) {
    super(props);
    (()=>{})(); //removes useless constructor on console
  }

  render() {
    return(
      <main>

        <Switch>
          <Route exact path="/home" component={TestPage}/>
        </Switch>
      </main>
    )
  }
}

export default Main;

TestPage.js

import React, { Component } from 'react';

class TestPage extends Component {
  constructor(props) {
    super(props);
    (()=>{})(); //removes useless constructor on console
  }

  render() {
    return(
      <div>
        import TestPage
      </div>
    )
  }
}

export default TestPage;

Does anyone know why TestPage.js isn't rendering? I'm just getting a blank page. Been hacking at this for a while. Thanks in advance!

0 Answers0