时间戳

首页 > 解决方案 > 使用 Webpack 配置 React 路由、Django URL

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

问题描述

教自己如何将 React 前端与 Django 服务器一起使用，但我很难让 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 的新手，所以不知道从哪里开始。

标签： djangoreactjswebpackdjango-rest-framework

解决方案

如果我正确理解您的问题，则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 应用程序）。

推荐阅读