Categories
django javascript python react-router reactjs

react routing and django url conflict

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;