Why is only the first React component rendering in my multi-page in Django app?


I am trying to render a secondary component to a different URL in my React frontend of my Django app. 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. My components are being loaded by importing in index.js in the components directory.

import App from './components/App';
import Viz from './components/Viz';
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}>
                        <Header />
                        <Alerts />
                        <div className="container">
                            <Dashboard />

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. I am using this as my index.html, with only the element ID switched:

<!DOCTYPE html>
<html lang="en">
    <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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <div id="app"></div>
    {% load static %}
    <script src="{% static "frontend/main.js" %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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. Any ideas?


Following the advice from @TonyN’s comments, I managed to get react-router method working well.

I reorganised App.js to be the home of the Router and brought my components in as follows:

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 (
                <Route exact path='/' element={ <UploadPage />} />
                <Route exact path='/viz' element={ <Viz /> } />

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

This left me with only one render. Only other update to make was urls on django side:

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.

Answered By – artfulinfo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published