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

HOME

React Router és una biblioteca estàndard per a la navegació en aplicacions React. Permet crear rutes dinàmiques i gestionar la navegació entre diferents components de manera senzilla i eficient. En aquesta secció, aprendrem els conceptes bàsics de React Router i com configurar-lo en una aplicació React.

Conceptes Clau

Rutes (Routes): Defineixen les diferents vies de navegació dins de l'aplicació.
Enrutador (Router): Component que s'encarrega de gestionar les rutes.
Enllaços (Links): Components que permeten la navegació entre rutes sense recarregar la pàgina.

Instal·lació de React Router

Abans de començar a utilitzar React Router, hem d'instal·lar la biblioteca. Utilitzarem npm (Node Package Manager) per instal·lar-la.

npm install react-router-dom

Configuració Bàsica

Un cop instal·lada la biblioteca, podem començar a configurar React Router en la nostra aplicació. A continuació, es mostra un exemple bàsic de com configurar React Router.

Estructura del Projecte

/src
  /components
    Home.js
    About.js
    Contact.js
  App.js
  index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  );
}

export default App;

Home.js

import React from 'react';

function Home() {
  return <h2>Home</h2>;
}

export default Home;

About.js

import React from 'react';

function About() {
  return <h2>About</h2>;
}

export default About;

Contact.js

import React from 'react';

function Contact() {
  return <h2>Contact</h2>;
}

export default Contact;

Explicació del Codi

index.js: Aquí envoltem l'aplicació amb el component BrowserRouter per habilitar la navegació.
App.js:
- Nav: Utilitzem el component Link per crear enllaços de navegació que no recarreguen la pàgina.
- Switch: El component Switch s'utilitza per renderitzar només la primera ruta que coincideixi.
- Route: Cada component Route defineix una ruta específica i el component que s'ha de renderitzar quan la ruta coincideix.
Home.js, About.js, Contact.js: Són components senzills que es renderitzen quan les rutes corresponents coincideixen.

Exercici Pràctic

Objectiu

Crea una nova ruta /services que renderitzi un component Services.

Passos

Crea un nou fitxer Services.js dins de la carpeta components.
Defineix un component senzill que mostri un missatge "Services".
Afegeix una nova ruta /services a App.js.
Afegeix un enllaç de navegació a la nova ruta en el menú de navegació.

Solució

Services.js

import React from 'react';

function Services() {
  return <h2>Services</h2>;
}

export default Services;

App.js (actualitzat)

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Services from './components/Services'; // Importa el nou component

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
          <li><Link to="/services">Services</Link></li> {/* Nou enllaç */}
        </ul>
      </nav>
      <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>
  );
}

export default App;

Conclusió

En aquesta secció, hem après els conceptes bàsics de React Router, com instal·lar-lo i configurar-lo en una aplicació React. També hem vist com crear rutes i enllaços de navegació. En la següent secció, explorarem com configurar React Router de manera més detallada i avançada.

Introducció a React Router

Conceptes Clau

Instal·lació de React Router

Configuració Bàsica

Estructura del Projecte

index.js

App.js

Home.js

About.js

Contact.js

Explicació del Codi

Exercici Pràctic

Objectiu

Passos

Solució

Services.js

App.js (actualitzat)

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