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

Navegació programàtica

Següent ►
►

En aquest tema, aprendrem com implementar la navegació programàtica en una aplicació React utilitzant React Router. La navegació programàtica ens permet redirigir els usuaris a diferents rutes de manera programàtica, és a dir, mitjançant codi, en lloc de fer-ho a través de la interacció directa de l'usuari amb els enllaços.

Objectius

  • Comprendre què és la navegació programàtica.
  • Aprendre a utilitzar el hook useHistory per navegar programàticament.
  • Implementar redireccions condicionals.

Què és la navegació programàtica?

La navegació programàtica és el procés de redirigir els usuaris a diferents rutes mitjançant codi, en lloc de fer-ho a través de la interacció directa de l'usuari amb els enllaços. Això és útil en situacions com:

  • Redirigir l'usuari després d'un formulari enviat correctament.
  • Redirigir l'usuari si no té permís per accedir a una pàgina.
  • Navegar a una pàgina específica en resposta a un esdeveniment.

Utilitzant el hook useHistory

React Router proporciona el hook useHistory que ens permet accedir a l'historial de navegació i utilitzar-lo per redirigir els usuaris.

Exemple bàsic

A continuació, es mostra un exemple bàsic de com utilitzar useHistory per navegar programàticament:

import React from 'react';
import { useHistory } from 'react-router-dom';

const HomePage = () => {
  const history = useHistory();

  const handleButtonClick = () => {
    // Navegar a la pàgina de perfil
    history.push('/profile');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleButtonClick}>Go to Profile</button>
    </div>
  );
};

export default HomePage;

Explicació del codi

  1. Importació del hook useHistory: Importem useHistory des de react-router-dom.
  2. Accés a l'historial: Utilitzem useHistory per obtenir l'objecte history.
  3. Navegació programàtica: Utilitzem el mètode push de l'objecte history per navegar a la ruta /profile quan es fa clic al botó.

Redireccions condicionals

Podem utilitzar la navegació programàtica per implementar redireccions condicionals. Per exemple, podem redirigir l'usuari a la pàgina d'inici de sessió si no està autenticat.

Exemple de redirecció condicional

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const Dashboard = ({ isAuthenticated }) => {
  const history = useHistory();

  useEffect(() => {
    if (!isAuthenticated) {
      // Redirigir a la pàgina d'inici de sessió si no està autenticat
      history.push('/login');
    }
  }, [isAuthenticated, history]);

  return (
    <div>
      <h1>Dashboard</h1>
      {isAuthenticated ? <p>Welcome to your dashboard!</p> : null}
    </div>
  );
};

export default Dashboard;

Explicació del codi

  1. Prop isAuthenticated: El component Dashboard rep una prop isAuthenticated que indica si l'usuari està autenticat.
  2. Hook useEffect: Utilitzem useEffect per executar codi quan el component es renderitza.
  3. Redirecció condicional: Si isAuthenticated és false, utilitzem history.push per redirigir l'usuari a la pàgina d'inici de sessió.

Exercicis pràctics

Exercici 1: Navegació programàtica bàsica

Crea un component LoginPage que redirigeixi a la pàgina de perfil (/profile) quan es faci clic a un botó "Login".

Solució

import React from 'react';
import { useHistory } from 'react-router-dom';

const LoginPage = () => {
  const history = useHistory();

  const handleLogin = () => {
    // Navegar a la pàgina de perfil
    history.push('/profile');
  };

  return (
    <div>
      <h1>Login Page</h1>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default LoginPage;

Exercici 2: Redirecció condicional

Crea un component ProtectedPage que redirigeixi a la pàgina d'inici de sessió (/login) si l'usuari no està autenticat.

Solució

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const ProtectedPage = ({ isAuthenticated }) => {
  const history = useHistory();

  useEffect(() => {
    if (!isAuthenticated) {
      // Redirigir a la pàgina d'inici de sessió si no està autenticat
      history.push('/login');
    }
  }, [isAuthenticated, history]);

  return (
    <div>
      <h1>Protected Page</h1>
      {isAuthenticated ? <p>Welcome to the protected page!</p> : null}
    </div>
  );
};

export default ProtectedPage;

Resum

En aquest tema, hem après com implementar la navegació programàtica en una aplicació React utilitzant React Router. Hem vist com utilitzar el hook useHistory per navegar programàticament i com implementar redireccions condicionals. Aquests conceptes són fonamentals per crear aplicacions React dinàmiques i interactives.

◄ 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