El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Rutes niades

Següent ►
►

Introducció

Les rutes niades permeten crear una jerarquia de rutes dins d'una aplicació React utilitzant React Router. Això és especialment útil per a aplicacions amb una estructura complexa, on diferents components necessiten ser renderitzats dins d'altres components en funció de la ruta actual.

Objectius

  • Comprendre què són les rutes niades.
  • Aprendre a configurar rutes niades amb React Router.
  • Veure exemples pràctics de rutes niades.
  • Realitzar exercicis pràctics per reforçar els conceptes apresos.

Què són les rutes niades?

Les rutes niades són rutes que es defineixen dins d'altres rutes. Això permet que una aplicació tingui una estructura de navegació més complexa i organitzada. Per exemple, una aplicació de comerç electrònic podria tenir una ruta principal per a "Productes" i rutes niades per a "Detalls del producte" i "Opinions del producte".

Configuració de rutes niades amb React Router

Instal·lació de React Router

Abans de començar, assegura't de tenir React Router instal·lat en el teu projecte. Pots instal·lar-lo utilitzant npm o yarn:

npm install react-router-dom

o

yarn add react-router-dom

Configuració bàsica

  1. Crear un component principal amb rutes niades:
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import Products from './components/Products';
import ProductDetails from './components/ProductDetails';
import ProductReviews from './components/ProductReviews';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/products">Products</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;
  1. Definir les rutes niades dins del component Products:
// components/Products.js
import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import ProductDetails from './ProductDetails';
import ProductReviews from './ProductReviews';

function Products() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Products</h2>
      <ul>
        <li><Link to={`${url}/details`}>Product Details</Link></li>
        <li><Link to={`${url}/reviews`}>Product Reviews</Link></li>
      </ul>

      <Route path={`${path}/details`} component={ProductDetails} />
      <Route path={`${path}/reviews`} component={ProductReviews} />
    </div>
  );
}

export default Products;
  1. Crear els components ProductDetails i ProductReviews:
// components/ProductDetails.js
import React from 'react';

function ProductDetails() {
  return (
    <div>
      <h3>Product Details</h3>
      <p>Here are the details of the product.</p>
    </div>
  );
}

export default ProductDetails;
// components/ProductReviews.js
import React from 'react';

function ProductReviews() {
  return (
    <div>
      <h3>Product Reviews</h3>
      <p>Here are the reviews of the product.</p>
    </div>
  );
}

export default ProductReviews;

Exemple pràctic

Estructura del projecte

/src
  /components
    Home.js
    Products.js
    ProductDetails.js
    ProductReviews.js
  App.js
  index.js

Codi complet

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './components/Home';
import Products from './components/Products';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/products">Products</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={Products} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;
// src/components/Home.js
import React from 'react';

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

export default Home;
// src/components/Products.js
import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import ProductDetails from './ProductDetails';
import ProductReviews from './ProductReviews';

function Products() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Products</h2>
      <ul>
        <li><Link to={`${url}/details`}>Product Details</Link></li>
        <li><Link to={`${url}/reviews`}>Product Reviews</Link></li>
      </ul>

      <Route path={`${path}/details`} component={ProductDetails} />
      <Route path={`${path}/reviews`} component={ProductReviews} />
    </div>
  );
}

export default Products;
// src/components/ProductDetails.js
import React from 'react';

function ProductDetails() {
  return (
    <div>
      <h3>Product Details</h3>
      <p>Here are the details of the product.</p>
    </div>
  );
}

export default ProductDetails;
// src/components/ProductReviews.js
import React from 'react';

function ProductReviews() {
  return (
    <div>
      <h3>Product Reviews</h3>
      <p>Here are the reviews of the product.</p>
    </div>
  );
}

export default ProductReviews;

Exercicis pràctics

Exercici 1

Objectiu: Afegir una nova ruta niada per a "Product Specifications".

  1. Crea un nou component ProductSpecifications.js dins de la carpeta components.
  2. Afegeix una nova ruta niada per a "Product Specifications" dins del component Products.
  3. Actualitza la navegació per incloure un enllaç a "Product Specifications".

Solució:

// src/components/ProductSpecifications.js
import React from 'react';

function ProductSpecifications() {
  return (
    <div>
      <h3>Product Specifications</h3>
      <p>Here are the specifications of the product.</p>
    </div>
  );
}

export default ProductSpecifications;
// src/components/Products.js
import React from 'react';
import { Route, Link, useRouteMatch } from 'react-router-dom';
import ProductDetails from './ProductDetails';
import ProductReviews from './ProductReviews';
import ProductSpecifications from './ProductSpecifications';

function Products() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Products</h2>
      <ul>
        <li><Link to={`${url}/details`}>Product Details</Link></li>
        <li><Link to={`${url}/reviews`}>Product Reviews</Link></li>
        <li><Link to={`${url}/specifications`}>Product Specifications</Link></li>
      </ul>

      <Route path={`${path}/details`} component={ProductDetails} />
      <Route path={`${path}/reviews`} component={ProductReviews} />
      <Route path={`${path}/specifications`} component={ProductSpecifications} />
    </div>
  );
}

export default Products;

Conclusió

Les rutes niades són una eina poderosa per organitzar la navegació dins d'una aplicació React. Permeten crear una estructura de rutes més complexa i jeràrquica, facilitant la gestió de components i la navegació dins de l'aplicació. Amb la pràctica, es poden crear aplicacions React robustes i ben organitzades utilitzant rutes niades.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats