Почему в моем многостраничном приложении на Django рендерится только первый компонент React?

Я пытаюсь вывести вторичный компонент на другой URL в моем React frontend моего приложения Django. URL, похоже, настроены правильно, так как заголовок страницы меняется соответствующим образом и никаких ошибок не возникает, но сама страница пуста. Мои компоненты загружаются путем импорта в 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)
]

Для простоты тестирования я сделал компоненты копией, чтобы знать, что они работают.

// 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'))

Единственное отличие от другого файла - это замена имени компонента и идентификатора элемента на App/app -> Viz/viz соответственно. Я использую это в качестве index.html, поменяв только идентификатор элемента:

<!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>

Я понял, что загружается только компонент , размещенный первым в index.js (я попробовал поменять их местами, что подтвердило это), поэтому я предполагаю, что есть что-то дополнительное, что я должен сделать при загрузке нескольких компонентов по сравнению с одним - но я не могу понять это. Есть идеи?

Следуя советам из комментариев @TonyN, мне удалось заставить метод react-router хорошо работать.

Я реорганизовал 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'))

В результате у меня остался только один рендер. Единственным обновлением, которое нужно было сделать, были урлы на стороне django:

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

Теперь я понимаю это взаимодействие немного лучше, так что спасибо, что направили меня в правильном направлении.

Этот видеоурок также помог оживить его для меня, поэтому я оставлю его здесь.

Вернуться на верх