React - Routing

• Szerző: Sallai András
• Copyright © 2023, Sallai András
• Szerkesztve: 2023, 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

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

npm install react-router-dom

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 (
    <BrowserRouter>
      <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>
    </BrowserRouter>
  );
}
 
export default App;

src/pages/About.js

const About = () => {
    return <h1>Névjegy</h1>
};
 
 
 
<code javascript src/pages/Emplyoees.js>
const Employees = () => {
    return <h1>Dolgozók</h1>
};
 
export default Employees;

src/pages/Home.js

const Home = () => {
    return <h1>Főoldal</h1>
};
 
export default Home;

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;

src/pages/Nopage.js

const Nopage = () => {
    return <h1>Nincs ilyen oldal</h1>
};
 
export default Nopage;

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

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;

src/pages/HomePage.jsx

import React from 'react'
 
const HomePage = () => {
  return (
    <div>Home lap</div>
  )
}
 
export default HomePage

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;

Navigációs sáv:

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

Layout:

src/layouts/MainLayout.jsx

import { Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
 
const MainLayout = () => {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  )
}
 
export default MainLayout

Lapok:

src/pages/EmpPage.jsx

const EmpPage = () => {
  return (
    <div>Dolgozók</div>
  )
}
 
export default EmpPage

src/pages/HomePage.jsx

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

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;

src/pages/NotFoundPage.jsx

const NotFoundPage = () => {
  return (
    <div>NotFoundPage</div>
  )
}
 
export default NotFoundPage

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;