Tartalomjegyzék

< React

React - Routing

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

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;

Oldalak

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;

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

Router objektum és lapok

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;

Több lap

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;

404-s oldal

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;