Respond to routing and django url conflict

Question

I use responsejs as an interface and django as a backend. A router is used for routing. When I refresh a page that is being routed using a router, I get a django 404 Page Not Found error . If I refresh the homepage, I do not get this error because the homepage is rendered using the django template, also using my url.

Do I need to configure this in a web package? My project structure - I split django and reactjs. I created the folder as the interface where the reactjs file is located.

UPDATE

the homepage template has all the link for routes like addrestaurant.

my webpack.config file

 const path = require("path"); if(!process.env.NODE_ENV) { process.env.NODE_ENV = 'development'; } module.exports = { entry: [ './src/index.js' ], output: { path: path.join("../app/static/build/", "js"), filename: "app.js", publicPath: "../app/static/build/" }, devtoo: 'source-map', debug: true, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }, {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=images/[name].[ext]"}, ] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: { historyApiFallback: true, contentBase: './' } }; 

urls.py

 urlpatterns = [ url(r'^', views.home, name="homePage"), url(r'^(?:.*)/?$', views.home), ] 

home.html

 {% extends 'base.html' %} {% block title %} Foodie | Homepage {% endblock title%} {% block content %} <div class="homepage"> </div> {% endblock %} {% block js %} {{ block.super }} <script type="text/javascript"> var data = { isUserAuthenticated:{% if request.user.is_authenticated %}true{% else %}false{% endif %} }; console.log('data',data); $(function() { app.showHomePage(".homepage",data); }); </script> {% endblock %} 

index.js

 window.app = { showHomePage: function(id,data){ render( <Provider store={createStoreWithMiddleware(reducers)}> <Router> <App /> </Router> </Provider>, document.querySelector(id) ); }, } 

Banner - a child component of the App component

 const Banner = (props) => ( <div className="navbar-container"> <div className="ui container"> <div className="ui large secondary menu"> <a className="toc item"> <i className="sidebar icon"></i> </a> <div className="item logo"> <div className="ui logo shape"> <div className="sides"> <div className="active ui side"> Foodie </div> </div> </div> </div> <Link to="/restaurant" className="active item tab">Home</Link> <Link to='/addrestaurant' className='item tab'>Add Restaurant</Link> <Link to="/products" className="item tab">Products</Link> <div className="right item"> <a href="" id="bookingInfoButton" className="ui white inverted button">Booking</a> </div> </div> </div> </div> ); export default Banner; 

Answer 1

Probably the problem is that you did not configure your URLs to handle the routes defined in React Router. In your Django urls.py you should use catch to match all urls to your index pattern

 urlpatterns += [ # match the root url(r'^$', base_view), # match all other pages url(r'^(?:.*)/?$', base_view), ] 

base_view will be a view function that displays a template that includes your associated application.

Answer 2

In case someone wonders, I had the exact problem, and Paul S.'s answer resolved. Adding an answer instead of a comment just because SO doesn't allow me to format code snippets inside comments. I ended up using a mixture of django new path() and old urls() in my urls.py :

 urlpatterns = [ path('login/', LoginView.as_view(), name='login'), path('logout/', LogoutView.as_view()), path('/', login_required(TemplateView.as_view(template_name="app.html"), login_url='login')), url(r'^(?:.*)/?$', login_required(TemplateView.as_view(template_name="app.html"), login_url='login')), ] 

Django handles login, logout and root / . React router handles everything else

Answer 3

Since url will depreciate in a future version of django, using re_path is best practice. See

Is it better to use path () or url () in urls.py for django 2.0?

 from django.urls import path, re_path urlpatterns = [ path('admin/', admin.site.urls), # regex should match everything re_path(r'^(?:.*)/?$', common_views.home, name='home'), ]