Aula 9 - React - IT Step

React Router

O roteamento no React é gerenciado principalmente pela biblioteca React Router. Ele permite criar interfaces de várias páginas em aplicações Single-Page Application (SPA), onde a navegação é feita dinamicamente sem recarregar a página.

Rode o seguinte comando no seu terminal npm install react-router-dom

Roteamento Básico

          
//crie um arquivo chamado Home.jsx
const Home = () => {
  return <h1>Bem-vindo à Home</h1>
};

export default Home;

          
//crie um arquivo chamado About.jsx
const About = () => {
  return <h1>Sobre Nós</h1>
};

export default About;

          
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from "./components/Home";
import About from "./components/About";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Redirecionamento

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Rotas Dinâmicas

Utiliza parâmetros na URL para acessar dados específicos.

            
//Crie um arquivo chamado User.jsx
const User = () =>  {
  const { id } = useParams();
  return <h1>Usuário ID: {id}</h1>;
}

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

const App = () => => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

Navegação Programática

Permite alterar rotas dinamicamente usando o hook useNavigate.

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

const Home = () => {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/about')}>Ir para Sobre</button>
}

export default Home;

Rotas Aninhadas

Organiza rotas hierarquicamente com o componente Outlet.

Inclui um onde serão renderizados os componentes das rotas filhas (Profile ou Settings).

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

// Crie um arquivo chamado Dashboard.jsx
const Dashboard = () => {
  return (
    <div>
      <h1>Dashboard </h1>
      <Outlet />
    </div>
  );
}

export default Dashboard;

    
// Crie um arquivo chamado Profile.jsx
const Profile = () => {
  return  <h1>Perfil </h1>;
}

export default Profile;

    

// Crie um arquivo chamado Settings.jsx
const Settings = () => {
  return <h1>Configurações</h1>
}

export default Settings;

    
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Dashboard from "./components/Dashboard";
import Profile from "./components/Profile";
import Settings from "./components/Settings";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard" element={ <Dashboard />}>
          <Route path="profile" element={ <Profile />} />
          <Route path="settings" element={ <Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Logo, temos como definidas as rotas:

/dashboard: Renderiza o componente Dashboard.
/dashboard/profile: Renderiza Profile dentro de Dashboard (graças ao <Outlet />).
/dashboard/settings: Renderiza Settings dentro de Dashboard.

Rotas Protegidas

Controle de acesso baseado em autenticação

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

//crie um arquivo chamado Login.jsx
const Login = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate("/home")}>Clique para se logar</button>
  );
};

export default Login;

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

//crie um arquivo chamado Login.jsx
const Login = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate("/home")}>Clique para se logar</button>
  );
};

export default Login;

            
import { Navigate } from "react-router-dom";

//Crie um arquivo chamado PrivateRoute.jsx
const PrivateRoute = ({ children }) => {
  const isAuthenticated = true; // Simulação de autenticação
  return isAuthenticated ? children : <Navigate to="/login" />
}

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/home"
          element={
            <PrivateRoute>
              <Home />
            </PrivateRoute>
          }
        />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
}

Agora faça um teste de colocar isAuthenticated como false e veja o resultado

Comparativo das Abordagens

Abordagem	Uso Principal	Complexidade	Cenário Ideal
Roteamento Básico	Navegação simples.	Baixa	Aplicações com poucas rotas.
Rotas Dinâmicas	URLs parametrizadas.	Média	Sistemas de perfil ou detalhe de produto.
Rotas Aninhadas	Rotas hierárquicas.	Alta	Dashboards ou sistemas modulares.
Navegação Programática	Navegação via lógica.	Média	Fluxos de autenticação ou carrinho.
Rotas Protegidas	Controle de acesso.	Alta	Sistemas com login obrigatório.