Como criar rotas no React


Neste tutorial será dado a continuidade a série sobre React. Esse tutorial é a continuação do anterior como integrar o React com Bootstrap.

Neste tutorial será apresentado como criar rotas no React. Primeiro será apresentado como criar as páginas no projeto React. Em seguida como usar o react-router-dom no React. Para finalizar será apresentado como carregar as páginas criadas com React no navegador.

Download do código fonte desenvolvido na aula: DOWNLOAD


Vamos para explicação textual o que é implementado nesse tutorial.

Primeiro será utilizado com base o código fonte do tutorial anterior como integrar o React com Bootstrap.

Em seguida será criado 3 página, a primeira será a página inicial "src/pages/Main/index.js", em seguida a página sobre empresa "src/pages/SobreEmpresa/index.js", última página "src/pages/Contato/index.js".

Na página "src/pages/Main/index.js", será criado o componente Main.

import React from 'react';

function Main(){
    return(
        <h1>Página Inicial</h1>
    );
};

export default Main;

Em seguida será criado o componente "SobreEmpresa" no arquivo "src/pages/SobreEmpresa/index.js".

import React from 'react';

function SobreEmpresa(){
    return(
        <h1>Página Sobre Empresa</h1>
    );
};

export default SobreEmpresa;

Também criado o componente "Contato" no arquivo "src/pages/Contato/index.js".

import React from 'react';

function Contato(){
    return(
        <h1>Página Contato</h1>
    );
};

export default Contato;

Em seguida criado o arquivo "src/routes.js" responsável em gerenciar as rotas.

//Importar as dependências
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';

//Importar as páginas
import Main from './pages/Main';
import SobreEmpresa from './pages/SobreEmpresa';
import Contato from './pages/Contato';

//Criar o componentes com as rotas
function Routes(){
    return(
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={Main} />
                <Route path="/sobre-empresa" component={SobreEmpresa} />
                <Route path="/contato" component={Contato} />
            </Switch>        
        </BrowserRouter>
    );
};

export default Routes;

Com o arquivo de rotas implementado, necessário incluir no projeto. Será incluído no arquivo "src/App.js".

import React from 'react';
import Routes from './routes';

function App () {
  return (
    <div>
        <Routes />
    </div>    
  );
};

export default App;

Agora pode ser acessado as rotas criadas acima, seja página inicial "http://localhost:3000/", página sobre empresa "http://localhost:3000/sobre-empresa" e a página de contato "http://localhost:3000/contato".

Para baixar o código fonte do projeto implementado até esse tutorial "DOWNLOAD", após baixar executar o comando "npm install" para instalar todas as dependências e o comando "npm start" para rodar o servidor.

Portanto, nesse tutorial foi abordado como criar rotas no React. Para ver todas as aulas de React acesse a PlayList.