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: http://kennypham.me/tutorial-setting-up-react-router-with-django/

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 urls.py:

url(r'^dashboard/',TemplateView.as_view(template_name="dashboard.html"))

and these lines in my React's file:

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

When visiting http://www.example.com/dashboard, things work really well. However, when I visit http://www.example.com/dashboard/#calendar, 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:

url(r'^.*/$',TemplateView.as_view(template_name="dashboard.html"))

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!

Menu