npx create-react-app nav-bar

npm install react-router-dom

src/components/navbar

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;
Kopyala

App.js

navbar

Route

import navbar from "./components/navbar";
import Dogs from "./pages/Dogs";
import Cats from "./pages/Cats";
import Sheeps from "./pages/Sheeps";
import Goats from "./pages/Goats";

function App() {
  return (
    <Router>
      <navbar />
      <Switch>
        <Route path='/' exact component={Dogs} />
        <Route path='/cats' component={Cats} />
        <Route path='/sheeps' component={Sheeps} />
        <Route path='/goats' component={Goats} />
      </Switch>
    </Router>
  );
}
export default App;
Kopyala