CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
TahBaconPerson
TahBaconPerson

Reputation: 106

React Router not rendering anything

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';

Upvotes: 2

Views: 1884

Answers (3)

Tomas Schaffer
Tomas Schaffer

Reputation: 94

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.

Upvotes: 0

Drew Reese
Drew Reese

Reputation: 203512

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")
);

Edit react-router-not-rendering-anything

Upvotes: 1

miklando
miklando

Reputation: 249

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

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

You also must capitalize components.

Upvotes: 3

Related Questions