close

Formatação de URL e Routing no React- um guia para usar React Router

Em um aplicativo React, a formatação de URL e routing desempenha um papel crucial na navegação de páginas e na exibição do conteúdo correspondente. Para gerenciar routing em React, podemos usar a biblioteca. Aqui está um guia básico sobre como usar para formatar URLs e manipulá-los em seu aplicativo React. React Router React Router routing

 

Instalar React Router

Abra o diretório do seu projeto no terminal e execute o seguinte comando para instalar: React Router npm install react-router-dom

Importe os componentes necessários para o seu componente React. React Router

 

Definir Rotas

Use o componente para agrupar seu aplicativo React e definir um formato de URL base. <BrowserRouter>

Use o <Route> componente para definir rotas em seu aplicativo.

Exemplo:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}

 

Definir Link s

Use o componente para criar s de navegação em seu aplicativo. <Link> link

Exemplo:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}

 

Parâmetros do caminho de acesso

Use o <Route> componente com um path atributo no formato /users/:id para acessar os parâmetros do caminho.

Dentro do componente definido pelo <Route>, você pode usar useParams() para acessar os valores dos parâmetros do caminho.

Exemplo:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}

 

Usar Switch e Redirect

Use o componente para renderizar apenas a primeira rota que corresponda ao caminho. <Switch>

Use o componente para usuários de um caminho especificado para outro. <Redirect> redirect

Exemplo:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}

 

Estes são alguns conceitos básicos de formatação de URL e routing no React usando. Ao utilizar, você pode criar aplicativos React flexíveis com a capacidade de navegar e exibir vários conteúdos com base na URL. React Router React Router