React router dom

Vamos mostrar o funcionamento do react router dom. Esse componente server para que possamos fazer a navegação entre componetes que vão funcionar como se fossem páginas. 

Lembrando que o React é diferente de React Native. React Native também tem um compoente para navegação mas o que vamos mostrar aqui é o react router dom para React. 

Como de costume, vamos pegar como exemplo o projeto criado nesse post. Esse é um projeto React que configuramos do zero mas se preferir pode usar qualquer projeto React que esteja configurado corretamente. 

Primeiro vamos navegar até a raiz do projeto pelo prompt e executar esse comando para instalar a dependência:

npm install --save react-router-dom

O arquivo www/index.html deve ficar assim:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Production</title>
  </head>
  <body>
  <div id="meu-app"></div>
  <script type="text/javascript" src="./bundle.js"></script></body>
</html>

O arquivo src/app/index.js deve ficar assim:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link,Switch } from 'react-router-dom';
 
const Produtos = () => (
  <div>
    <h1>Produtos!!!!</h1>
  </div>
)

const Home = () => (
  <div>
    <h1>Home!</h1>
  </div>
)
 
class App extends React.Component{
                 

 render(){
     return (
      <div>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/produtos' component={Produtos}/>
         </Switch>
         <h1>Conteúdo fixo</h1>
         <nav>
          <ul>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/produtos'>Produtos</Link></li>
          </ul>
         </nav>
         
      </div>       
     );
 }
};
ReactDOM.render(
<BrowserRouter>
    <App />
</BrowserRouter>
,document.getElementById("meu-app"));

Os componentes Home e Produtos estão no mesmo arquivo. Fiz isso para deixar mais simples e destacar o funcionamento do React router dom. 

Mas quando aplicar no projeto é recomendável deixar os componentes separados em arquivos diferentes.

Vamos executar o projeto e ver o resultado:

Imagem

Imagem

Comentários

 

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente