使用 Webpack 配置 React 路由、Django URL

Question

自学如何将 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>
    )
  }
};

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

Answer 1

我有一个类似的问题，但对我来说 django 管理页面没有显示。将此添加到我的前端/网址对我有用。

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

Answer 2

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

Answer 3

通常在前端框架（如（angular、react、vue）中，路由器仅处理（客户端）中的te调用并为每个路由绘制正确的组件，因此您需要一个像服务一样工作的组件，并且使调用后端 api。 e.j.

utility.js

export function get_some_route(){
    return fetch('some_route');
}

实用程序文件包含获取后端路由的函数。这样你就可以 导入此文件并获取为路由器渲染的组件中的数据。

your_component.js

import get_some_route from 'utility.js';
class x extends component{
  ...
  componentDidMount(){
     get_some_route().then(response => {
         // do some thing with the data e.j
         this.setState({data: response.data});
     }
  }
  ...
  render(){
      return(/*some html with the data */);
  }
}