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>
    )
  }
};

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

Answer 1

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

一种可行的解决方案是为您的Django主应用添加一条通通的路由：

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

作为最后一条路线。这只是使Django为每个请求呈现您的应用，而react-router将负责路由。

缺点是，如果真正页面不存在，您将不会得到404（在您的情况下，该名称没有测验）。除了复制路由配置外，我还没有找到解决方案（在您的情况下，检查Django应用中是否存在具有该名称的测验）。

Answer 2

通常在前端框架（例如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 */);
  }
}

Answer 3

我遇到了类似的问题，但对我而言，django管理页面未显示。将其添加到我的前端/ URL对我有用。

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

使用Webpack配置React路由，Django URL

3 个答案: