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.
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.
Em seguida será criado o componente "SobreEmpresa" no arquivo "src/pages/SobreEmpresa/index.js".
function SobreEmpresa(){
<h1>Página Sobre Empresa</h1>
export default SobreEmpresa;
Também criado o componente "Contato" no arquivo "src/pages/Contato/index.js".
<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
//Importar as páginas
import SobreEmpresa from './pages/SobreEmpresa';
import Contato from './pages/Contato';
//Criar o componentes com as rotas
<Route path="/sobre-empresa" component={SobreEmpresa} />
<Route path="/contato" component={Contato} />
Com o arquivo de rotas implementado, necessário incluir no projeto. Será incluído no arquivo "src/App.js".
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".
Portanto, nesse tutorial foi abordado como criar rotas no React. Para ver todas as aulas de React acesse a PlayList.