反应路由和 django url 冲突
[英] react routing and django url conflict
本文介绍了反应路由和 django url 冲突的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 reactjs 作为前端，django 作为后端.React 路由器用于路由.当我刷新由反应路由器路由的页面时，我收到 django 404 Page Not Found 错误.如果我刷新主页，我不会收到任何此类错误，因为主页也是由 django 模板使用其 url 呈现的.
我必须在 webpack 中配置它吗?我的项目结构是我将 django 和 reactjs 分开.我创建了一个文件夹作为 reactjs 文件所在的前端.
更新
主页模板包含诸如 addrestaurant 之类的路线的所有链接.
我的 webpack.config 文件
const path = require("path");如果(！process.env.NODE_ENV){process.env.NODE_ENV = '开发';}模块.出口 = {入口: ['./src/index.js'],输出: {路径:path.join("../app/static/build/", "js"),文件名:app.js"，公共路径:../app/static/build/"},devtoo: '源地图',调试:真的，模块: {装载机:[{排除:/node_modules/，装载机:'巴别塔'，询问: {预设:['react'、'es2015'、'stage-1']}},{test:/.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=images/[name].[ext]"},]},解决: {扩展名:['', '.js', '.jsx']},开发服务器:{historyApiFallback: 真,内容库:'./'}};
urls.py
urlpatterns = [url(r'^', views.home, name="homePage"),url(r'^(?:.*)/?$', views.home),]
home.html
{% 扩展 'base.html' %}{% 块标题 %} 美食家 |首页{% endblock title%}{% 块内容 %}<div class="主页">
{% 结束块 %}{% 块 js %}{{ block.super }}<script type="text/javascript">变量数据 = {isUserAuthenticated:{% if request.user.is_authenticated %}true{% else %}false{% endif %}};console.log('数据',数据);$(函数(){app.showHomePage(".homepage",data);});{% 结束块 %}
index.js
window.app = {显示主页:功能(ID，数据){使成为(<Provider store={createStoreWithMiddleware(reducers)}><路由器><应用程序/></路由器></Provider>, document.querySelector(id));},}
Banner 是 App 组件的子组件
const Banner = (props) =>(<div className="navbar-container"><div className="ui 容器"><div className="ui 大二级菜单"><a className="toc item"><i className="侧边栏图标"></i></a><div className="项目标志"><div className="ui logo shape"><div className="sides"><div className="active ui side">美食家
<Link to="/restaurant" className="活动项目标签">首页</Link><Link to='/addrestaurant' className='item tab'>添加餐厅</Link><Link to="/products" className="item tab">Products</Link><div className="正确的项目"><a href="" id="bookingInfoButton" className="ui 白色倒置按钮">Booking</a>
);导出默认横幅；
解决方案
问题可能是您尚未配置 URL 来处理 React Router 中定义的路由.在您的 Django urls.py 中，您应该使用 catch all 将所有 URL 匹配到您的索引模板
urlpatterns += [#匹配根url(r'^$', base_view),# 匹配所有其他页面url(r'^(?:.*)/?$', base_view),]
base_view 将是一个视图函数，用于呈现包含捆绑应用程序的模板.
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;
解决方案
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.
这篇关于反应路由和 django url 冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
