Getting a blank page from reactJS-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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'

CodePudding user response：

Because you use export default, you should fix to

import navBar from './components/NavBar'

And named follow coding convention navBar to NavBar.

CodePudding user response：

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