szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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 =====

<code>
npx create-react-app app01
code app01
</code>

<code>
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
</code>

==== Függőségek ====

A projekt könyvtárán belül:

<code>
npm install react-router-dom
</code>


==== Routing ====

<code javascript src/main.js>
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)
</code>


<code javascript src/App.js>
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 (
    <>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='employees' element={<Employees />} />
          <Route path='about' element={<About />} />
          <Route path='*' element={<Nopage />} />
        </Route>
      </Routes>
    </>
  );
}

export default App;
</code>

<note tip>
Ha importálni szeretnénk VSCode-ban automatikusan, akkor
segíthet, ha egy pillanatra átváltunk az importálandó fájlba.
</note>
==== Oldalak ====

<code javascript src/pages/About.js>
const About = () => {
    return <h1>Névjegy</h1>
};

export default About;
</code>


<code javascript src/pages/Emplyoees.js>
const Employees = () => {
    return <h1>Dolgozók</h1>
};

export default Employees;
</code>


<code javascript src/pages/Home.js>
const Home = () => {
    return <h1>Főoldal</h1>
};

export default Home;
</code>


<code javascript src/pages/Layout.js>
import { Outlet, Link } from "react-router-dom";

const Layout = () => {
    return (
        <>
        <nav>
            <ul>
                <li>
                    <Link to="/">Főoldal</Link>
                </li>
                <li>
                    <Link to="/employees">Dolgozók</Link>
                </li>
                <li>
                    <Link to="/about">Névjegy</Link>
                </li>

            </ul>
        </nav>
        <Outlet />
        </>
    )
}

export default Layout;
</code>


<code javascript src/pages/Nopage.js>
const Nopage = () => {
    return <h1>Nincs ilyen oldal</h1>
};

export default Nopage;
</code>

===== 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

<code javascript src/App.js>
import './App.css';

import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider
} from 'react-router-dom';

const router = createBrowserRouter(
  createRoutesFromElements(<Route index element={<h1>Alkalmazás 01</h1>} />)
);

function App() {
  return <RouterProvider router={router}/>;
}

export default App;

</code>

==== Router objektum és lapok ====

<code javascript src/pages/HomePage.jsx>
import React from 'react'

const HomePage = () => {
  return (
    <div>Home lap</div>
  )
}

export default HomePage

</code>

<code javascript src/App.js>
import './App.css';

import {
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider
} from 'react-router-dom';
import HomePage from './pages/HomePage';

const router = createBrowserRouter(
  createRoutesFromElements(<Route index element={<HomePage />} />)
);

function App() {
  return <RouterProvider router={router}/>;
}

export default App;

</code>


==== Több lap ====

Navigációs sáv:

<code javascript src/components/Navbar.jsx>
import  { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <>
      Navigációs sáv

      <Link to="/">Főoldal</Link>
      <Link to="/emp">Dolgozó</Link>
    
    </>
  )
}

export default Navbar
</code>


Layout:

<code javascript src/layouts/MainLayout.jsx>
import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';

const MainLayout = () => {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  )
}

export default MainLayout
</code>


Lapok:

<code javascript src/pages/EmpPage.jsx>
const EmpPage = () => {
  return (
    <div>Dolgozók</div>
  )
}

export default EmpPage
</code>

<code javascript src/pages/HomePage.jsx>
const HomePage = () => {
  return (
    <div>Home lap</div>
  )
}

export default HomePage
</code>


<code javascript src/App.js>
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(
    <Route path='/' element={<MainLayout />}>
      <Route index element={<HomePage />} />
      <Route path='/emp' element={<EmpPage />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router}/>;
}

export default App;

</code>

==== 404-s oldal ====

<code javascript src/pages/NotFoundPage.jsx>
const NotFoundPage = () => {
  return (
    <div>NotFoundPage</div>
  )
}

export default NotFoundPage
</code>


<code javascript src/App.js>
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(
    <Route path='/' element={<MainLayout />}>
      <Route index element={<HomePage />} />
      <Route path='/emp' element={<EmpPage />} />
      <Route path='*' element={<NotFoundPage />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router}/>;
}

export default App;

</code>