Tutorial De React Router Dom V6

Neste tutorial de introdução ao React Router Dom V6, vamos explorar as configurações iniciais, a criação de rotas, a navegação entre rotas e recursos avançados dessa biblioteca de roteamento para projetos React.

Por Awari

Publicado em 27 de agosto de 2023

Glossário

Introdução ao React Router Dom V6

Configuração Inicial do React Router Dom V6

O React Router Dom é uma biblioteca popular para roteamento no React. Com a versão 6, o React Router Dom trouxe diversas melhorias e mudanças em relação à versão anterior. Neste tutorial, vamos explorar o React Router Dom V6 e aprender a utilizá-lo em nossos projetos React.

1. Instalação:

Abra o terminal e navegue até o diretório do seu projeto.
Execute o comando npm install react-router-dom para instalar o pacote do React Router Dom.

2. Configuração do Roteador:

No arquivo principal do seu aplicativo, geralmente chamado de App.js ou index.js, importe o componente BrowserRouter do React Router Dom.
Embrulhe todo o conteúdo do seu aplicativo com o componente BrowserRouter, garantindo que ele seja o componente pai de todos os outros componentes.
Exemplo de código:

    
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* Conteúdo do seu aplicativo */}
    </BrowserRouter>
  );
}

3. Configuração das Rotas:

Dentro do componente BrowserRouter, defina as rotas do seu aplicativo utilizando o componente Route.
Cada rota deve ter uma propriedade path, que define o caminho da URL, e uma propriedade component, que especifica o componente a ser renderizado quando o caminho corresponder.
Exemplo de código:

    
import { Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
      <Route path="/sobre" component={Sobre} />
      <Route path="/contato" component={Contato} />
    </BrowserRouter>
  );
}

4. Navegação entre as Rotas:

Para criar links de navegação entre as rotas, utilize o componente Link do React Router Dom.
A propriedade to define o destino do link, que pode ser uma URL ou o caminho da rota.
Exemplo de código:

    
import { Link } from 'react-router-dom';

function Menu() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/sobre">Sobre</Link>
        </li>
        <li>
          <Link to="/contato">Contato</Link>
        </li>
      </ul>
    </nav>
  );
}

Agora que configuramos o React Router Dom V6 em nosso projeto, podemos utilizar todas as funcionalidades avançadas que essa biblioteca oferece. Vamos explorar mais sobre navegação e roteamento no próximo tópico.

Aprenda uma nova língua na maior escola de idiomas do mundo! Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa. Quero estudar na Fluency

Nossa metodologia de ensino tem eficiência comprovada

Navegação e Roteamento no React Router Dom V6

Com o React Router Dom V6, temos várias opções para lidar com a navegação e o roteamento em nossos aplicativos React. Vamos conhecer algumas delas:

Navegação Programática:

O React Router Dom V6 oferece um hook chamado useNavigate, que nos permite navegar programaticamente para uma rota específica.
Exemplo de código:

    
import { useNavigate } from 'react-router-dom';

function MeuComponente() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/outra-rota');
  }

  return (
    <button onClick={handleClick}>Ir para outra rota</button>
  );
}

Passagem de Parâmetros:

Podemos passar parâmetros pela URL utilizando o componente Route e acessá-los nos componentes correspondentes.
Exemplo de código:

    
import { useParams } from 'react-router-dom';

function DetalhesProduto() {
  const { id } = useParams();

  return (
    <div>
      Detalhes do produto {id}
    </div>
  );
}

Aninhamento de Rotas:

Podemos aninhar rotas dentro de outras rotas, permitindo uma estrutura de roteamento mais complexa.
Exemplo de código:

    
import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={} />
        <Route path="/produtos/*" element={} />
      </Routes>
    </BrowserRouter>
  );
}

Recursos Avançados do React Router Dom V6

Além das funcionalidades básicas de navegação e roteamento, o React Router Dom V6 também oferece recursos avançados que podem ser úteis em projetos mais complexos. Alguns desses recursos incluem:

Guardas de Rota:

Podemos definir guardas de rota para controlar o acesso às rotas com base em determinadas condições.
Exemplo de código:

    
import { Route, Navigate } from 'react-router-dom';

function RotaProtegida({ element: Component, ...rest }) {
  const isAuthenticated = getAuthStatus();

  return (
    <Route
      {...rest}
      element={isAuthenticated ? <Component /> : <Navigate to="/login" />}
    />
  );
}

Roteamento Lazy:

Podemos carregar dinamicamente os componentes das rotas utilizando o conceito de roteamento lazy.
Exemplo de código:

    
import { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={Carregando...}>
        <Route path="/" element={} />
      </Suspense>
    </BrowserRouter>
  );
}

Com todas essas funcionalidades avançadas, o React Router Dom V6 se torna uma poderosa ferramenta para lidar com o roteamento em projetos React. Espero que este tutorial tenha sido útil para você aprender mais sobre o React Router Dom V6 e como utilizá-lo em seus projetos.

Aprenda uma nova língua na maior escola de idiomas do mundo! Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa. Quero estudar na Fluency

A Awari é a melhor plataforma para aprender sobre programação no Brasil.

Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.

Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.

Aprenda uma nova língua na maior escola de idiomas do mundo! Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa. Quero estudar na Fluency

Aprenda uma nova língua na maior escola de idioma do mundo!

Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.

+ 400 mil alunos

Método validado

Aulas

Ao vivo e gravadas

+ 1000 horas

Duração dos cursos

Certificados

Reconhecido pelo mercado

Quero estudar na Fluency

Tutorial De React Router Dom V6

Introdução ao React Router Dom V6

Configuração Inicial do React Router Dom V6

1. Instalação:

2. Configuração do Roteador:

3. Configuração das Rotas:

4. Navegação entre as Rotas:

Navegação e Roteamento no React Router Dom V6

Navegação Programática:

Passagem de Parâmetros:

Aninhamento de Rotas:

Recursos Avançados do React Router Dom V6

Guardas de Rota:

Roteamento Lazy:

A Awari é a melhor plataforma para aprender sobre programação no Brasil.

Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas

Um curso técnico desenvolvedor de sistemas é uma formação que capacita profissionais na área de desenvolvimento...

Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira

Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma carreira sólida e aproveite as oportunidades do...

Curso de Desenvolvedor: Valorize sua Carreira na Tecnologia

Um curso de desenvolvedor valoriza sua carreira na tecnologia, proporcionando conhecimentos técnicos, habilidades profissionais, networking e...