使用Python Flask和Webpack对路由器作出反应，而不是呈现组件

我有一个现有的PythonFlask后端，它从各种来源获取信息。我编写了一个独立的React前端来提供这些数据。现在，我正试图将两者结合起来。我想在烧瓶后端运行React前端。我尝试将其用作骨架：

现在，我正试图让我的React路由器使用该解决方案，但由于Flask进行服务器端路由渲染，路由没有任何进展。我尝试使用此处定义的“一网打尽”：

catch-all用于显示“path:home”或“path:management”或其他内容。但不是组件。在对已接受答案的评论中，似乎另一个用户在呈现组件方面遇到了与我相同的问题，并使用带有“/public”的静态URL修复了该问题。然而，在我使用的这个GitHub项目中，他们使用了一个“静态”文件夹和一个“服务器”文件夹，我认为我没有正确地路由它

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=Flask（\uuuuu name\uuuuuu，static\u url\u path=“/static”，
static_folder=“../static”）
@app.route（'/'，默认值={'path'：''}）
@应用程序路径（“/”）
def catch_all（路径）：
返回app.send\u静态文件（“index.html”）
如果uuuu name uuuuuu='\uuuuuuu main\uuuuuuu'：
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;

import React，{Component}来自“React”；
从“./components/Test/Test.js”导入测试；
从“./pages/TestPage/TestPage.js”导入TestPage；
从“/components/Main/Main.js”导入Main；
导入“../css/styles/index.css”；
需要（'../css/fullstack.css'）；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
}
渲染（）{
返回(
);
}
}
导出默认应用程序；

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;

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;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向}；
从“../../pages/TestPage/TestPage.js”导入TestPage；
类主扩展组件{
建造师（道具）{
超级（道具）；
（（）=>{}）（；//删除控制台上无用的构造函数
}
render（）{
返回(
)
}
}
导出默认主；

TestPage.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;

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;

import React，{Component}来自'React'；
类TestPage扩展组件{
建造师（道具）{
超级（道具）；
（（）=>{}）（；//删除控制台上无用的构造函数
}
render（）{
返回(
导入测试页
)
}
}
导出默认测试页面；

---

有人知道TestPage.js为什么不呈现吗？我只是得到一张空白页。我已经在这方面做了一段时间了。提前谢谢

您的

index.html

文件中有什么？你的控制台上有错误吗？