El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a configurar React Router, una biblioteca essencial per gestionar la navegació en aplicacions React. React Router ens permet crear aplicacions d'una sola pàgina (SPA) amb múltiples vistes i rutes.

Objectius

Comprendre la importància de React Router.
Instal·lar i configurar React Router en una aplicació React.
Crear rutes bàsiques i navegar entre elles.

Què és React Router?

React Router és una biblioteca de navegació per a aplicacions React que permet:

Definir rutes per a diferents components.
Navegar entre aquestes rutes sense recarregar la pàgina.
Gestionar la història de navegació.

Instal·lació de React Router

Per començar, necessitem instal·lar React Router en el nostre projecte. Utilitzarem react-router-dom, que és la versió de React Router per a aplicacions web.

Pas 1: Instal·lació

Obre el terminal i executa la següent comanda:

npm install react-router-dom

Pas 2: Configuració bàsica

Un cop instal·lat, podem començar a configurar React Router en la nostra aplicació.

Configuració bàsica de React Router

Pas 1: Crear un component de navegació

Primer, crearem un component de navegació que ens permetrà moure'ns entre diferents rutes.

// src/components/Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Inici</Link></li>
        <li><Link to="/about">Sobre nosaltres</Link></li>
        <li><Link to="/contact">Contacte</Link></li>
      </ul>
    </nav>
  );
};

export default Navbar;

Pas 2: Definir les rutes

Ara, definirem les rutes en el nostre component principal.

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/Navbar';

const Home = () => <h2>Inici</h2>;
const About = () => <h2>Sobre nosaltres</h2>;
const Contact = () => <h2>Contacte</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
};

export default App;

Explicació del codi

BrowserRouter (Router): És el component que envolta tota l'aplicació i gestiona la història de navegació.
Route: Defineix una ruta específica i el component que s'ha de renderitzar quan la URL coincideix amb el path.
Switch: Renderitza només la primera ruta que coincideix. Això és útil per evitar que múltiples rutes es renderitzin al mateix temps.

Navegació entre rutes

Amb la configuració anterior, ja podem navegar entre les diferents rutes utilitzant els enllaços del component Navbar.

Exercici pràctic

Exercici

Afegeix una nova ruta /services que mostri un component Services amb el text "Serveis".
Afegeix un enllaç a Navbar per a la nova ruta.

Solució

// src/components/Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Inici</Link></li>
        <li><Link to="/about">Sobre nosaltres</Link></li>
        <li><Link to="/contact">Contacte</Link></li>
        <li><Link to="/services">Serveis</Link></li> {/* Nou enllaç */}
      </ul>
    </nav>
  );
};

export default Navbar;

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/Navbar';

const Home = () => <h2>Inici</h2>;
const About = () => <h2>Sobre nosaltres</h2>;
const Contact = () => <h2>Contacte</h2>;
const Services = () => <h2>Serveis</h2>; // Nou component

const App = () => {
  return (
    <Router>
      <div>
        <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/services" component={Services} /> {/* Nova ruta */}
        </Switch>
      </div>
    </Router>
  );
};

export default App;

Conclusió

En aquesta secció, hem après a configurar React Router en una aplicació React, crear rutes bàsiques i navegar entre elles. Aquesta configuració és fonamental per a qualsevol aplicació React que necessiti múltiples vistes o pàgines. En el proper tema, explorarem les rutes niades per gestionar estructures de navegació més complexes.

Configuració de React Router

Objectius

Què és React Router?

Instal·lació de React Router

Pas 1: Instal·lació

Pas 2: Configuració bàsica

Configuració bàsica de React Router

Pas 1: Crear un component de navegació

Pas 2: Definir les rutes

Explicació del codi

Navegació entre rutes

Exercici pràctic

Exercici

Solució

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa