Getting a blank page from reactJS

Question

The following code snippets are giving me this error.

Line 2:10:  'navBar' is defined but never used  no-unused-vars

What am I doing wrong?

App.js

import React from 'react'
import { navBar } from './components/navBar'

const App = () => {
  return (
      <navBar/>
  )
}

export default App

navBar.js

import React from 'react';
import {  Link } from "react-router-dom";
const navBar= () =>{
  return (
  <div>
    <li>
      <Link to="/">Dogs</Link>
    </li>
    <li>
      <Link to="/cats">Cats</Link>
    </li>
    <li>
      <Link to="/sheeps">Sheeps</Link>
    </li>
    <li>
      <Link to="/goats">Goats</Link>
    </li>
  </div>
  );
}
export default navBar

Answer 1

When creating a React component, the component's name MUST start with an upper case letter.

If you used export default then no need to use {} just import without {} and use it

import NavBar from './components/NavBar'

Answer 2

The <Link> component is supposed to be used inside BrowserRouter .

import React from "react";
import { Link, BrowserRouter as Router } from "react-router-dom";

export default function NavBar() {
  return (
    <Router>
        <ul>
          <li>
            <Link to="/">Dogs</Link>
          </li>
          <li>
            <Link to="/cats">Cats</Link>
          </li>
          <li>
            <Link to="/sheeps">Sheeps</Link>
          </li>
          <li>
            <Link to="/goats">Goats</Link>
          </li>
        </ul>
    </Router>
  );
}

Answer 3

Because you use export default, you should fix to

import navBar from './components/NavBar'

And named follow coding convention navBar to NavBar.

Answer 4

React is a one page framework so you need to change your components as dynamically, use react router for this. if you need handle page as public access you can use Nextjs . it have a inbuild file based routing

important: Nextjs have server side rendering so be careful about that when you build dynamically data update