【问题标题】：React rendered components from Django doesn't show after reloading来自 Django 的 React 渲染组件在重新加载后不显示
【发布时间】：2021-08-06 05:52:08
【问题描述】：

我有一个 Django 项目，它作为前端向浏览器发出 Javascript(ReactJS)。这是一个 SSR 应用程序——Django 使用加载 React 脚本的模板呈现视图。

一切正常，除非我转到不同的页面（使用 React-router 路由的 React 组件）并重新加载浏览器。 Django 服务器将 URL 路由到 URLconf 中不存在的模式，因此干扰反应组件导致 Django 404 错误。

有没有办法解决这个问题？

PS：出于兼容性和测试的目的，我选择了这种方法而不是解耦方法。

以下是与问题相关的基本部分：

后端

urls.py

from django.urls import path

from frontend import views

urlpatterns = [
    path("", views.react_template, name="react_template"),
]

views.py

from django.shortcuts import render


def react_template(request):
    return render(request, "template.html", {"title": "Chatter"})

模板

from django.urls import path

from frontend import views

urlpatterns = [
    path("", views.react_template, name="react_template"),
]

前端

App.js

import React, { useEffect, Fragment } from "react";
import ReactDOM from "react-dom";

import webSocketInstance from "../utils/websocket";
import PrivateRoute from "../utils/privateRoute";

// ...
import Chat from "./chat/chat";
import CreateRoom from "./chat/room";

import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Index} />
        <Route
          path="/login"
          render={() => <Login />}
        />
        <Route path="/signup" render={() => <Signup />} />
        <PrivateRoute path="/room">
          <CreateRoom />
        </PrivateRoute>
        <PrivateRoute path="/chat">
          <Chat />
        </PrivateRoute>
      </Switch>
    </BrowserRouter>
  );
}

Index.js

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";

import App from "./components/app";
import store from "./states/store";

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("app")
);

【问题讨论】：

更改您的 url 路径以匹配任何内容并始终返回反应模板？ path("<path:route>", views.react_template, name="react_template")
@lain Shelvington 好的......但这将匹配所有 URL。我会将所有必要的 URL 从 React-router 添加到 Django URL 路径。我很欣赏这个主意。

标签： python reactjs django react-router

【解决方案1】：

我不确定最适合您的解决方案是什么，但这个可行

urlpatterns = [
    path("", views.react_template), 
    re_path(r'^.*', views.react_template),
]

第二个应该捕获所有路径

【讨论】：

是的，您的解决方案与我后来所做的类似。我在 Django 路径中添加了必要的 URL。这样，任何其他路径都会显示 404 错误。