React | not showing contents on the site-CodePudding

I'm creating a react app. The elements I add to my App.js file are not appearing on the site when I run npm start, the index.html elements will load, however, the rest will not.

Here is my code: (Note: I'm using an earlier version of react-router-dom which is why I'm using Switch instead of Routes)

App.js

import './App.css';
import React from 'react';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <>
    <Router>
      <Navbar />
      <Switch>
        <Route path="/" exact />
      </Switch>
      </Router>
    </>
  );
}

export default App;

index.js

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

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

Navbar.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  const [click, setClick] = useState(false);

  const handleClick = () => setClick(!click);
  const closeMobileMenu = () => setClick(false);
  return (
      <>
          <nav className="navBar">
              <div className='navbar-container'>
                  <Link to="/" className="navbar-logo">
                  <img alt="collabrity" src="images/icon.png" width="25" height="25"></img>collabrity
                  </Link>
                  <div className='menu-icon' onClick={handleClick}>
                      <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
          </div>
          <ul className={click ? 'nav-menu active' : 'nav-menu'}>
            <li className='nav-item'>
              <Link to='/' className='nav-links' onClick={closeMobileMenu}>
                Home
              </Link>
            </li>
          </ul>
              </div>
        </nav>
      </>
  )
}

export default Navbar

package.json

{
  "name": "NAME",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

All I've tried to do so far is create a navigation bar menu, but nothing will appear on the site (even if just putting something like <h1>Test</h1> within the app function).

Thank you in advance for any push in the right direction.

CodePudding user response：

You're not actually rendering anything for the route. For the Route component you either have to pass in a component to the component prop or add it as a child.

<Route path="/" exact component={SomeComponent} />
{/* OR */}
<Route path="/" exact>
  <SomeComponent />
</Route>

CodePudding user response：

@Nawak Khalifah pointed me in the right direction by linking me to their code sandbox.

I altered my index.js file to look more like:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

While also passing a component for the route. This seemed to fix it.

Thanks so much.