react routing and django url conflict

Question

I am using reactjs as a frontend and django as backend. React router is used for routing. When i refresh the page that has routed by react router, i get django 404 Page Not Found error. If i refresh the homepage, i dont get any such error because the homepage is rendered by django template too using its url.

Do i have to configure that in the webpack? My project structure is i have seperated django and reactjs. I have created a folder as frontend where reactjs file resides.

UPDATE

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 is a child component of 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;

My project structure is same as yours. I didn't have to do any kind of extra url configuration anywhere. Can you share the file where you have defined your routes. And also the file where you have defined the django url — Swapnil
– Swapnil, Commented Nov 27, 2016 at 7:49
Your react router is not having a path. Last time I used React router, I had to specify path attribute. Is this a new way of using react router? — Swapnil
– Swapnil, Commented Nov 27, 2016 at 12:16

Paul S · Accepted Answer · 2016-11-27 07:22:59Z

40

The issue is probably that you haven't configured your URLs to handle the routes that are defined in React Router. In your Django urls.py you should be using a catch all to match all URLs to your index template

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

The base_view would be a view function that renders a template which includes your bundled app.

answered Nov 27, 2016 at 7:22

Paul S

36.9k6 gold badges45 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Paul S Over a year ago

Is it still a 404 error or is it an issue with your React app?

milan Over a year ago

my browser got hang.

Paul S Over a year ago

I'm not really sure what you mean. Your browser is freezing when you try to load your project? I'm not sure what would cause that unless you have an infinite loop somewhere. You probably need to do some dev tools debugging. Is it at least loading the correct page now?

Laura Silvani Over a year ago

Hi Paul S, I stumbled upon this question cause I have the same issue. Not really a Django girl, so could you please tell me what should I put in base_view?

Pedro Walter Over a year ago

In case you have other URLs in your stack (I use django's built-in login/logout views), make sure you add the catch-all URL at the bottom of your URL stack.

|

OBAA · Accepted Answer · 2019-03-07 22:21:14Z

28

In case anyone has this same problem, in django 2.0, follow 'Kevin Martin Jose' answer but instead, replace url with re_path

from django.urls import path, re_path

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')),
    re_path(r'^(?:.*)/?$', login_required(TemplateView.as_view(template_name="app.html"), 
    login_url='login')),
]

answered Mar 7, 2019 at 22:21

OBAA

4244 silver badges6 bronze badges

2 Comments

Mikebarson Over a year ago

Thank you! This really worked. I had 2 separate django apps one for the django-rest and the other for the react. I only needed to place the the re_path in the frontend app (the react part) in my urls.

Sebastián Vansteenkiste Over a year ago

My case as well. Of course, just in case, the frontend's urls.py's urls should be included last in your main app's urls.py or else we're going to swallow API requests and return app.html for them instead of their actual responses :D

Kevin Martin Jose · Accepted Answer · 2018-10-02 14:08:08Z

7

In case someone's wondering, I had the exact problem and Paul S's answer solved it. Adding an answer instead of comment only because SO does not let me format code snippets inside comments. I ended up using a mixture of django's new path() and the 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 the login, logout and the root /. React router handles everything else

answered Oct 2, 2018 at 14:08

Kevin Martin Jose

6409 silver badges24 bronze badges

1 Comment

Sean Perry Over a year ago

"re_path" is the new name for the old "url" for those who see this.

t1m0 · Accepted Answer · 2021-03-09 19:46:43Z

4

Here is an answer inspired by the Kevin Jones and Paul S answers. I was having issues with the regex and hosting a REST API. If my front-end app ever didn't append the slash when making API calls, it wouldn't match and it would get routed back to the front end. This is because the django setting APPEND_SLASH=True requires that it goes through urlpatterns and fails once before it appends the slash and tries again. Therefor, here is a regex that just excludes anything starting with 'api' or 'admin' and otherwise sends it on to the front end.

urlpatterns = [
path("admin/", admin.site.urls),
path("api/", include(router.urls)),  # from rest_framework
re_path('(^(?!(api|admin)).*$)',
    TemplateView.as_view(template_name="build/index.html")),
]

answered Mar 9, 2021 at 19:46

t1m0

7351 gold badge7 silver badges14 bronze badges

1 Comment

Siddaram H Over a year ago

thanks for the check of api/admin.. Can add meda/static urls also to exclude

Preston Badeer · Accepted Answer · 2020-12-24 21:52:29Z

Here's a solution that does not cause overrides of other views, and doesn't require you to trash your 404 handler.

The disadvantage is this requires keeping an up-to-date list of your routes, but that's what this file is meant for.

In urls.py:

from django.urls import re_path
from myapp import views

# This wrapper turns your list into a regex URL matcher
react_views_regex = r'\/|\b'.join([

    # List all your react routes here
    'view1',
    'view2'

]) + r'\/'

urlpatterns = [
    # Change views.index to whatever your view is
    re_path(react_views_regex, views.index),
]

These URLs should work with or without a trailing slash, are case-sensitive (like real routes), and will only match the full word (so views like 'user' and 'users' will not conflict).

sansalgo · Accepted Answer · 2022-11-09 08:20:30Z

0

Use HashRouter instead of BrowserRouter or manually type react-router-dom path in Django application (app) urls.

answered Nov 9, 2022 at 8:20

sansalgo

1031 silver badge13 bronze badges

2 Comments

k.tten Over a year ago

Can you explain why it works?

sansalgo Over a year ago

This happens between server and client side, in this case you specify the path on client side using react router, it actually works using window.location.pathname. you reload the page the server checks the path exists on the server side, that's why you have. There is no page error, but you are using HashRouter and the server does not know the contents of the path after the hashtag. refer: stackoverflow.com/a/51976069/18568151

Collectives™ on Stack Overflow

react routing and django url conflict

6 Answers 6

8 Comments

2 Comments

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

8 Comments

2 Comments

1 Comment

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related