web-dev-qa-db-ja.com

ルーティングに反応し、Django= URLの競合

フロントエンドとしてreactjsを使用し、バックエンドとしてDjangoを使用しています。Reactルーターがルーティングに使用されています。reactルーターによってルーティングされたページを更新すると、i get Django 404 Page Not Found error。ホームページを更新しても、ホームページはDjangoテンプレートによってURLを使用してレンダリングされるため、このようなエラーは発生しません。

それをWebpackで構成する必要がありますか？プロジェクト構造は、Djangoとreactjsに分離されています。reactjsファイルが存在するフロントエンドとしてフォルダーを作成しました。

[〜＃〜]更新[〜＃〜]

ホームページテンプレートには、レストランのようなルートへのすべてのリンクがあります。

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: './'
  }
};

rls.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)
          );
      },
}

バナーはアプリコンポーネントの子コンポーネントです

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;
javascriptpythondjangoreactjsreact-router
17
milan

問題はおそらく、Reactルーターで定義されているルートを処理するようにURLを構成していないことです。Django urls.pyすべてのURLをインデックステンプレートに一致させるには、catch allを使用する必要があります

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

base_viewは、バンドルされたアプリを含むテンプレートをレンダリングするビュー関数です。

18
Paul S

誰かがこれと同じ問題を抱えている場合は、Django 2.0で、「Kevin Martin Jose」の回答に従いますが、代わりにrlを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')),
]
7
OBAA

誰かが疑問に思った場合、私は正確な問題を抱えていて、Paul Sの答えがそれを解決しました。 SOではコメント内のコードスニペットをフォーマットできないため、コメントの代わりに回答を追加します。Djangoの新しいpath()と古いurls()自分の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はログイン、ログアウト、ルート/を処理します。 Reactルーターは他のすべてを処理します

3
Kevin Martin Jose