React Router not rendering anything-CodePudding

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 >
                <div >
                    <div >
                        <img  src="./img/pizza.jpg" alt=""/>
                    </div>
                    <div >
                        <h1 >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 >
                <div >
                    <p >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';

CodePudding user response：

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

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

You also must capitalize components.

CodePudding user response：

If you export as default you import like this:

import home from './components/home'

You can't have multiple default exports.

I recommend you to export like this:

export function home() {

Then you don't need to write the export at the end of your file, you just won't be able to change export names and I think that's a good thing.

Then you can import like:

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