[[oktatas:web:react|< React]] ====== React - Routing ====== * **Szerző:** Sallai András * Copyright (c) 2023, Sallai András * Szerkesztve: 2023, 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== Projekt készítése ===== npx create-react-app app01 code app01 app01/ |-public/ |-src/ |-pages/ | |-About.js | |-Emplyoees.js | |-Home.js | |-Layout.js | `-Nopage.js |-App.css |-App.js |-App.test.js |-index.css |-index.js |-logo.svg |-reportWebVitals.js |-setupTests.js |-.gitignore |-package-lock.json |-package.json `-README.md ==== Függőségek ==== A projekt könyvtárán belül: npm install react-router-dom ==== Routing ==== import { BrowserRouter, Routes, Route } from 'react-router-dom'; import './App.css'; import Layout from './pages/Layout'; import Home from './pages/Home'; import Employees from './pages/Employees'; import About from './pages/About'; import Nopage from './pages/Nopage'; function App() { return ( }> } /> } /> } /> } /> ); } export default App; ==== Oldalak ==== const About = () => { return

Névjegy

}; const Employees = () => { return

Dolgozók

}; export default Employees;
const Home = () => { return

Főoldal

}; export default Home;
import { Outlet, Link } from "react-router-dom"; const Layout = () => { return ( <> ) } export default Layout; const Nopage = () => { return

Nincs ilyen oldal

}; export default Nopage;
===== A router objektum ===== Nézzünk egy másik megoldást. Itt is szükségünk van a react-router-dom csomagra: npm install react-router-dom import './App.css'; import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter( createRoutesFromElements(Alkalmazás 01} />) ); function App() { return ; } export default App; ==== Router objektum és lapok ==== import React from 'react' const HomePage = () => { return (
Home lap
) } export default HomePage
import './App.css'; import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom'; import HomePage from './pages/HomePage'; const router = createBrowserRouter( createRoutesFromElements(} />) ); function App() { return ; } export default App; ==== Több lap ==== Navigációs sáv: import { Link } from 'react-router-dom'; const Navbar = () => { return ( <> Navigációs sáv Főoldal Dolgozó ) } export default Navbar Layout: import { Outlet } from 'react-router-dom'; import Navbar from '../components/Navbar'; const MainLayout = () => { return ( <> ) } export default MainLayout Lapok: const EmpPage = () => { return (
Dolgozók
) } export default EmpPage
const HomePage = () => { return (
Home lap
) } export default HomePage
import './App.css'; import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom'; import HomePage from './pages/HomePage'; import MainLayout from './layouts/MainLayout'; import EmpPage from './pages/EmpPage'; const router = createBrowserRouter( createRoutesFromElements( }> } /> } /> ) ); function App() { return ; } export default App; ==== 404-s oldal ==== const NotFoundPage = () => { return (
NotFoundPage
) } export default NotFoundPage
import './App.css'; import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom'; import HomePage from './pages/HomePage'; import MainLayout from './layouts/MainLayout'; import EmpPage from './pages/EmpPage'; import NotFoundPage from './pages/NotFoundPage'; const router = createBrowserRouter( createRoutesFromElements( }> } /> } /> } /> ) ); function App() { return ; } export default App;