Yazeka
Arama sonuçlarına göre oluşturuldu
React Router ile navbar yapımı şu adımlarla gerçekleştirilir:
- React Uygulaması Kurulumu:
npx create-react-app nav-bar
komutunu kullanarak React uygulamasını oluşturun 1. - React Router'ı Kurma:
npm install react-router-dom
komutuyla React Router kütüphanesini kurun 12. - Navbar Bileşeni Oluşturma:
src/components/navbar
dizinindenavbar.js
dosyasını oluşturun ve içine aşağıdaki kodu yazın 1: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;
- App.js Dosyasında Bağlantıları Tanımlama:
App.js
dosyasındanavbar
bileşenini ve her bir hayvan sayfası içinRoute
bileşenlerini tanımlayın 13: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;
- Sunucuyu Çalıştırma: `
5 kaynaktan alınan bilgiyle göre: