为什么我的 Django 应用程序的多页面中只有第一个 React 组件呈现？

Question

I am trying to render a secondary component to a different URL in my React frontend of my Django app.我正在尝试将辅助组件呈现到我的 Django 应用程序的 React 前端中的不同 URL。 The URLs seem to be set up correctly, as the page title is changing accordingly and no errors are thrown, but the page itself is blank. URL 似乎设置正确，因为页面标题正在相应更改并且没有引发错误，但页面本身是空白的。 My components are being loaded by importing in index.js in the components directory.我的组件是通过导入组件目录中的index.js来加载的。

#index.js
import App from './components/App';
import Viz from './components/Viz';

#urls.py
from django.urls import path
from . import views
urlpatterns = [
    path('', views.index),
    path('viz/', views.getviz)
]

For the simplicity of testing, I made the components a copy so I know it works.为了测试的简单性，我将组件复制了一份，所以我知道它可以工作。

// App.js
import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';

import Header from './layout/Header';
import Dashboard from './splits/Dashboard';
import Alerts from './layout/Alerts';

import { Provider } from 'react-redux';
import { Provider as AlertProvider } from 'react-alert';
import AlertTemplate from 'react-alert-template-basic';

import store from '../store';

//Alert Options
const alertOptions = {
    timeout: 3000,
    position: 'bottom center'
}

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <AlertProvider template={AlertTemplate} {...alertOptions}>
                    <Fragment>
                        <Header />
                        <Alerts />
                        <div className="container">
                            <Dashboard />
                        </div>
                    </Fragment>
                </AlertProvider>
            </Provider>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

The only difference with the other file is the replacement of the component name and element id to change from App/app -> Viz/viz respectively.与其他文件的唯一区别是组件名称和元素 ID 的替换分别从App/app -> Viz/viz更改。 I am using this as my index.html , with only the element ID switched:我将其用作我的index.html ，仅切换了元素 ID：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>viz</title>
</head>
<body>
    <div id="app"></div>
    {% load static %}
    <script src="{% static "frontend/main.js" %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

I realised that only the component placed first in the index.js is being loaded (I tried switching them round which confirmed it), so I imagine there is something additional I need to do when loading multiple components vs. one - but I can't figure it out.我意识到只有在index.js中首先放置的组件被加载（我尝试切换它们确认它），所以我想在加载多个组件而不是一个时我需要做一些额外的事情 - 但我可以'想不通。 Any ideas?有任何想法吗？

Answer 1

Following the advice from @TonyN's comments, I managed to get react-router method working well.根据@TonyN 评论的建议，我设法让react-router方法运行良好。

I reorganised App.js to be the home of the Router and brought my components in as follows:我将App.js重新组织为路由器的主页，并将我的组件引入如下：

import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import UploadPage from './UploadPage';
import Viz from './Viz';
import { BrowserRouter as Router, Routes, Route, Link, Redirect } from 'react-router-dom'


export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
            <Routes>
                <Route exact path='/' element={ <UploadPage />} />
                <Route exact path='/viz' element={ <Viz /> } />
            </Routes>
        </Router>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

This left me with only one render.这让我只有一个渲染。 Only other update to make was urls on django side:只有其他更新是 django 端的 url：

from django.urls import path
from . import views
urlpatterns = [
    path('', views.index),
    path('viz', views.index)
]

I now understand this interaction a bit better, so thanks for pointing me in the right direction.我现在对这种互动有了更好的理解，所以感谢您为我指明了正确的方向。

This video tutorial also helped bring it to life for me, so I'll leave that here too.这个视频教程也帮助我实现了它，所以我也会把它留在这里。

为什么我的 Django 应用程序的多页面中只有第一个 React 组件呈现？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-05-16 22:13:13

为什么我的 Django 应用程序的多页面中只有第一个 React 组件呈现？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-05-16 22:13:13

解决方案1
0 已采纳 2022-05-16 22:13:13