React Router not rendering anything

Question

when using react-router-dom, I cannot render any of my components or anything. All it does is show a white screen, it doesn't add anything to my index.html template. There aren't any errors however it says that in index.js there are unused variables that are my components.

Heres my code:

index.js

// Imports
import React from 'react';
import ReactDOM from 'react-dom';
import './css/index.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import { navbar, footer, home } from './components';

ReactDOM.render(
    <Router>
      <navBar />
      <Routes>
        <Route path="/" element={<home />} />
      </Routes>
      <footer />
    </Router>,
    document.getElementById("root")
);

home.jsx

import React from "react";

function home(){
    return(
        <div className="home">
            <div class="container">
                <div class="row allign-items-center my-5">
                    <div class="col-lg-7">
                        <img class="img-fluid rounded mb-4 mb-lg-0" src="./img/pizza.jpg" alt=""/>
                    </div>
                    <div class="col-lg-5">
                        <h1 class="font-weight-light">cencored</h1>
                        <p>cencored</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default home;

navBar.jsx

import React from 'react';
import {NavLink} from 'react-router-dom';

function navBar(){
        return(
            <div className="navBar">
                <nav className="navbar navbar-expand navbar-dar bg-dark">
                    <div className="container">
                        <NavLink className="navbar-brand" to="/"><img src="../img/logo.png" alt="logo" style="width:500px;height:500px;"/></NavLink>
                        <div>
                            <ul className="navbar-nav ml-auto">
                                <li className="nav-item">
                                    <NavLink className="nav-link" to="/menu">Menu</NavLink></li>
                                <li className="nav-item">
                                    <NavLink className="nav-link" to="/about">About</NavLink></li>
                                <li className="nav-item">
                                    <NavLink className="nav-link" to="/contact">Contact</NavLink></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
    );
}


export default navBar;

footer.jsx

import React from 'react';
import {NavLink} from 'react-router-dom';

function footer(){
    return(
        <div className="footer">
            <footer class="py-5 bg-dark fixed-bottom">
                <div class="container">
                    <p class="m-0 text-center text-white">cencored</p>
                </div>
                 <div>
                    <ul className="navbar-nav ml-auto">
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/">Home</NavLink></li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/menu">Menu</NavLink></li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/about">About</NavLink></li>
                        <li className="nav-item">
                            <NavLink className="nav-link" to="/contact">Contact</NavLink></li>
                    </ul>
                </div>
            </footer>
        </div>
    );
}


export default footer;

index.js (component exports)

export { default as navbar } from './navBar';
export { default as footer } from './footer';
export { default as home } from './home';

What do you mean by "*it doesn't add anything to my index.html template.*"? — Bergi, Dec 28 '21 at 20:19
Does it work if you render these components without a router? — Bergi, Dec 28 '21 at 20:19
Shouldn't the names of custom components start with capital letters? — Bergi, Dec 28 '21 at 20:19
@Bergi if I go into inspect element the html is the same as the index.html template, nothing is added to the root div. No, it doesn't work without a router, and I changed them all to capital letters and it still didn't work. — TahBaconPerson, Dec 28 '21 at 20:25
If it doesn't work without the routing either, react-router is not the culprit and you should rephrase your question. Is your `index.js` module even loaded and executed? Are you getting any errors in the devtools console? What toolchain do you use, is the jsx syntax transpiled correctly? — Bergi, Dec 28 '21 at 20:30
where does come from the `Routes` component ? I don't see it in the react router documentation... — Olivier Boissé, Dec 28 '21 at 20:42

score 3 · Answer 1 · answered Dec 28 '21 at 20:20

3

Instead of using the element prop on your Route try to component prop like

<Route path="/" component={Home}>

You also must capitalize components.

answered Dec 28 '21 at 20:20

miklando

249
1
5

Still nothing. :( – TahBaconPerson Dec 28 '21 at 20:27
@TahBaconPerson I've never used the `` component. If you want to do exclusive rendering try the `` component – miklando Dec 28 '21 at 20:31
2

OP is using `react-router-dom` v6 so there isn't a `component` prop for rendering routed components, and `Routes` replaced the `Switch` component. This answer is incorrect. – Drew Reese Dec 28 '21 at 21:21

score 1 · Answer 2 · answered Dec 28 '21 at 21:27

React components should use PascalCase names.

export { default as Navbar } from './navBar';
export { default as Footer } from './footer';
export { default as Home } from './home';

...

import { Navbar, Footer, Home } from './components';

ReactDOM.render(
    <Router>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
      <Footer />
    </Router>,
    document.getElementById("root")
);

score 0 · Answer 3 · answered Dec 28 '21 at 21:35

You are missing import of Switch from 'react-router-dom' and after you have to wrap your Routes into . And into Routes you have to add all of your components with path not only Home component.

Pseudo code:

    import { Switch, Route, Router } from "react-router-dom";
    import Home from '.....path'
    //import all routing componets
    
    const Routes = () => {
     return(
    <Switch>
     <Route exact path='/' component={Home}>
     <Route exact path='/comp1' component={Comp1}>
     <Route exact path='/comp2' component={Comp2}>
   </Switch>)}

  

   const App = () => {
    <Router>
      <GlobalNav />
      <Container fluid={true}>
        <SideNav />
        <Routes />
      </Container>
    </Router>}

Then you can add your navbar anywhere but has to be wrapped into router. I just added as example i can have a typo somewhere but if you follow the concept it should work. And change your components to Pascal naming.

React Router not rendering anything

3 Answers3