React Router

Waarom React Router?

Naast componenten ga je ook pagina's maken in React. Deze pagina's moeten met elkaar verbonden worden zodat je een volledige website hebt.

In normaal HTML gebruik je de <a> tag om pagina's te linken:

<!-- Gewone HTML -->
<a href="about.html">Over Ons</a>

Installeren

Om React Router te gebruiken, moet je dit eerst installeren via je terminal:

npm i react-router-dom

Stap 1: Pages Maken

Maak in de src-folder een nieuwe folder aan genaamd Pages (met hoofdletter):

src/
├── components/
├── pages/          ← Nieuwe folder
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Contact.jsx
│   └── NoPage.jsx
└── App.jsx

React ziet dit ook gewoon als een component dus met de shortcut sfc zet je de code klaar.

Home.jsx:

// src/Pages/Home.jsx
const Home = () => {
  return (
    <div>
      <h1>Home Pagina</h1>
      <p>Welkom op onze website!</p>
    </div>
  );
};

export default Home;

About.jsx:

// src/Pages/About.jsx
const About = () => {
  return (
    <div>
      <h1>Over Ons</h1>
      <p>Hier staat informatie over ons bedrijf.</p>
    </div>
  );
};

export default About;

NoPage.jsx (404 pagina):

// src/Pages/NoPage.jsx
const NoPage = () => {
  return (
    <div>
      <h1>404 - Pagina niet gevonden</h1>
      <p>Sorry, deze pagina bestaat niet.</p>
    </div>
  );
};

export default NoPage;

Stap 2: Router Opzetten in App.jsx

Om de router op te zetten ga je naar App.jsx. Hier importeer je alles wat je nodig hebt:

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './Pages/Home';
import About from './Pages/About';

Je begint met de <BrowserRouter> en daarna definieer je de <Routes>. In de Routes zit de <Route> wat aangeeft in welke path de pagina's komen:

// src/App.jsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './Pages/Home';
import About from './Pages/About';
import NoPage from './Pages/NoPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Stap 3: Navigation Maken

Maak een Navigation.jsx pagina aan in je Pages folder:

// src/Pages/Navigation.jsx
import { Link, Outlet } from 'react-router-dom';

const Navigation = () => {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">Over Ons</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      
      <Outlet />
    </>
  );
};

export default Navigation;

Stap 4: Navigation Integreren

De navigatie moet op elke pagina gebruikt worden. Hiervoor wrap je ALLE Routes IN de Route naar navigation:

// src/App.jsx - Finale versie
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Navigation from './Pages/Navigation';
import Home from './Pages/Home';
import About from './Pages/About';
import NoPage from './Pages/NoPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigation />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Nieuwe Pagina Toevoegen

Elke keer wanneer je een nieuwe pagina maakt, doe je dit:

1. Maak de pagina component:

// src/Pages/Contact.jsx
const Contact = () => {
  return (
    <div>
      <h1>Contact</h1>
      <p>Neem contact met ons op!</p>
    </div>
  );
};

export default Contact;

2. Voeg Route toe in App.jsx:

import Contact from './Pages/Contact';

// In de Routes:
<Route path="contact" element={<Contact />} />

3. Voeg Link toe in Navigation.jsx:

<li><Link to="/contact">Contact</Link></li>