django - 使用 Webpack 配置 React 路由、Django URL

Question

自学如何在 Django 服务器上使用 React 前端，但我很难让 React 路由正常工作。每当我重新加载页面时，它都认为我正在向服务器发出 GET 请求。在 localhost:8000 刷新工作正常，但除 API 路由之外的任何其他内容都会出错。

很确定问题出在我的 urls.py 文件之一中。

quiz_app/urls.py

urlpatterns = [
  path('', include('quizzes.urls')),
  path('', include('frontend.urls'))
]

frontend/urls.py

urlpatterns = [
  path('', views.index )
]

quizzes/urls.py

urlpatterns = [
  path('admin/', admin.site.urls),
  path(r'^nested_admin/', include('nested_admin.urls')),
  re_path('api/quizzes/', views.QuizList.as_view()),
  re_path('api/quizzes/<str:name>/', views.SingleQuiz.as_view()),
  re_path('api/questions/', views.QuestionList.as_view()),
  re_path('api/answers/', views.AnswerList.as_view())
]

好的措施:

frontend/views.py

def index(request):
  return render(request, 'frontend/index.html')

frontend/src/App.js

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Grid>
            <Header />
            <Route exact path="/" component={Quizzes} />
            <Route exact path="/:name" component={Quiz} />
          </Grid>
        </div>
      </Router>
    )
  }
};

重申一下，问题在于 "/:name" App.js 中的路由试图向 Django 服务器发出“GET”请求并出错，因为没有什么可以处理它们而不是默认为 React 路由。让我知道我在这里做错了什么。我在将 React 与其他服务器框架一起使用时解决了这个问题，但我是 Python/Django 的新手，所以不确定从哪里开始。

Answer 1

如果我正确理解你的问题，那么 views.html呈现将运行在 App.js 中定义的应用程序的页面.您遇到的问题是，如果您访问 URL http://yourserver/my-quiz , 其中 my-quiz是一个测验名称，请求将被发送到 Django 服务器，它说:404，我不知道那个 URL。

一个可行的解决方案是向您的 Django 主应用程序添加一个包罗万象的路由:

urlpatterns += re_path(r'.*', views.index)

作为最后一条路线。这只是让 Django 为每个请求渲染你的应用程序，而 react-router 将负责路由。

这样做的缺点是，如果页面确实不存在，您将不会收到 404(在您的情况下，该名称没有测验)。除了复制路由配置之外，我还没有找到解决方案(在您的情况下，如果存在具有该名称的测验，请检查 Django 应用程序)。