Problem with react-router and Django URLs (solved)

Update on November 21, 2015: I have found a solution for this problem. A tutorial will be posted soon.

Wow it is 2016 now, the tutorial is at:

Hello there,

I have faced this problem since the beginning of the current project. The problem is that react-router and Django urls don't like each others.

For example, I have this line in Django's


and these lines in my React's file:

    <Route path="/dashboard" component={MainDashboard}>
    <Route path="#calendar" component={Calendar}/>
), document.getElementById('content'))

When visiting, things work really well. However, when I visit, what I want is to show the Calendar page. The web app that I build is an SPA so the Calendar page can be rendered when it is selected directly on the Dashboard's menu. However, since Django's URL conflicts with react-router's setting, it will try to render "dashboard.html" regardless.

A member on StackOverflow said that I have to make anything else that is outside of the defined urls to dashboard.html like this:


However, it still doesn't work for me. I'm working for a fix now. I will try to incorporate NodeJS into the server. From now on, I plan to use Django mainly to serve APIs from Django REST Framework but won't use it to render any templates.

It's a great time for me to learn more about npm and trending dependencies from the community. And more on that later. I will write up a tutorial whenever I solve this problem.

Enjoy coding!

Kenny Pham

Read more posts by this author.