I've been running into some issues involving React and React Router Dom. For some reason, nothing is showing when I us the nom start command. The browser window opens, but it just display a white screen. Nothing I do seems to work. I think it has something to do with my navigation bar.

My code is as follows:

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );

App.js

import { Route, BrowserRouter, Routes } from 'react-router-dom';
import './App.css';
import Navbar from './Components/Navbar';
import Home from './Pages/Home';
import Team from './Pages/Team';
import Demo from './Pages/Demo';
import Footer from './Components/Footer'

function App() {
  return (
    <>
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path='/' element={<Home />}/>
        <Route path='/team' element={<Team />}/>
        <Route path='/demo' element={<Demo />}/>
      </Routes>
      <Footer />
    </BrowserRouter>
    </>
  );
}

export default App;

Navbar.js

import React from 'react';
import logo from '../Media/eclipse.png';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <div>
      <div id="navbar" className="fixed top-0 left-0 right-0 z-50">
        <nav className="p-3 bg-transparent md:flex md:items-center
          md:justify-between border-0
          z-50 max-h-16">
          <header className="flex justify-between items-center">
            <span className="text-2xl font-bold cursor-pointer">
              <img className="h-12 mb-1 inline md:ml-12" src={logo}></img>
              <h1 className="pt-5 inline"><a href="#page-1"></a></h1>
            </span>
            <span className="text-3xl cursor-pointer md:hidden block">
              <ion-icon name="menu" onclick="Menu(this)" className="text-white"></ion-icon>
            </span>
          </header>
            <ul className=" list-none md:flex md:items-center z-[-1] md:z-auto md:static absolute
              w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all
              ease-in duration-500 bg-white md:bg-transparent">
              <li className="mx-4 my-6 md:my-0">
                <Link to="/" className="text-xl hover:text-orange-500 duration-500 md:text-white text-black
                  hover:underline">Home</Link>
              </li>
              <li className="mx-4 my-6 md:my-0">
                <Link to="/teams" className="text-xl hover:text-orange-500 duration-500 md:text-white text-black
                  hover:underline">Team</Link>
              </li>
              <li className="mx-4 my-6 md:my-0 rounded-xl text-black px-5 flex items-center bg-black">
                <Link to="/demopage.html" className="text-xl hover:text-orange-100 text-white
                  duration-500">Demo</Link>
              </li>
            </ul>
        </nav>
      </div>
    </div>
  )
}

function Menu(e) {
  let list = document.querySelector('ul');
  e.name === 'menu' ? (e.name = "close", list.classList.add('top-[80px]'), list.classList.add('opacity-100')) : (e.name = "menu", list.classList.remove('top-[80px]'), list.classList.remove('opacity-100'))
}

export default Navbar

Footer.js

import React from 'react'

const Footer = () => {
  return (
    <div>Footer</div>
  )
}

export default Footer

Home.js

import React from 'react'

const Home = () => {
    return (
        <div>
            <div className='h-screen w-full bg-neutral-900'>
                <div id='landing-page-1'>
                    <div className='grid grid-cols-12 grid-row-6'>
                        <div className='col-start-2 col-end-8 row-start-1 row-end-2'>Optimization of Cards</div>
                        <div className='col-start-8 col-end-11 row-start-1 row-end-2'> Things go here</div>

                    </div>
                </div>
                <div id='info-page-2'></div>
                <div id='info-page-3'></div>
            </div>
        </div>
    )
}

export default Home

Team.js

import React from 'react'

const Team = () => {
  return (
    <div>Team</div>
  )
}

export default Team

Demo.js

import React from 'react'

const Demo = () => {
  return (
    <div>Demo</div>
  )
}

export default Demo

CodePudding user response：

If you are using latest react, then you need another way of render your application.

I'm not sure if this will help, but it worth to try

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

CodePudding user response：

You can write your index like this

    import { BrowserRouter } from 'react-router-dom';
    const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
      <BrowserRouter>
      <React.StrictMode>
        <App />
      </React.StrictMode>
      </BrowserRouter>
);

reportWebVitals();