Configuring React Routes, Django URLs using Webpack

user_9023395 0
Viewed 2562

Teaching myself how to use a React frontend with a Django server and I'm having difficulty getting the React routes to work properly. Whenever I reload the page it thinks I'm making a GET request to the server. Refreshing at localhost:8000 works fine, but anything other than an API route errors out.

Pretty sure the issue is in one of my urls.py files. 

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())
]

For good measure:

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

To reiterate, the issue is that the "/:name" routes in App.js are attempting to make "GET" requests to the Django server and erroring out because there's nothing to handle them rather than defaulting to a React route. Let me know what I'm doing wrong here. I've fixed this problem when using React with other server frameworks, but I'm new to Python/Django so not sure where to go from here.

django-rest-framework webpack reactjs django
3 Answers

If I understand your question correctly, then views.html renders the page that will run the app defined in App.js. And the problem you have is that if you go to a URL http://yourserver/my-quiz, where my-quiz is a quiz name, the request will be sent to the Django server, which says: 404, I don’t know about that URL.

One working solution is to add a catch-all route to your Django main app:

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

as the last route. This simply makes Django render your app for each and every request, and react-router will take care of the routing.

The downside to this is that you won’t get a 404 if the page really doesn’t exist (in your case, there is no quiz by that name). I haven’t found a solution for that yet except duplicating routing configuration (in your case, checking in the Django app if a quiz with that name exists).

user_2539540

usually in the frontend framework like (angular, react, vue ) the routers only handle te calls in (the client side) and draw the correct component for each route so you need a component that works like a service, and there make calls to the backend api. e.j.

utility.js

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

the utility file contain functions to fetch the backend routes. so you can import this file an get the data in the component rendered for the router.

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 */);
  }
}
user_67189840

I had a simmilar issue but for me the django admin page was not showing. Adding this to my frontend/urls worked for me.

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