Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

React Router V4

Percebo que a versão do react router foi atualizada e estamos na V4. De acordo com a nova documentação a aplicação das rotas se da diferente.

No meu app eu configurei dessa forma, mas não coloquei no index.js mas sim no App.js, vocês podem me dizer se pode ser assim? O app continua funcionando perfeitamente.

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom"; 
import Pergunta from './pages/Pergunta';
import DadosPessoais from './pages/DadosPessoais';
import Confirmacao from './pages/Confirmacao';
import Agradecimento from './pages/Agradecimento';

export default props => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Pergunta} />
      <Route path="/dados-pessoais" component={DadosPessoais} />
      <Route path="/confirmacao" component={Confirmacao} />
      <Route path="/agradecimento" component={Agradecimento} />
    </Switch>
  </BrowserRouter>
);

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/styles/main.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
5 respostas
solução

Fala aí David, tudo bem? Não vejo problemas, é algo que fica a nossa critério onde vamos definir as rotas.

Não existe um certo ou errado, depende de cada pessoa, time, empresa, etc...

Eu por exemplo, ultimamente tenho criado um componente chamado Routes dentro de uma pasta config e chamo ele no index.js.

Mas, em outros projetos eu acabo criando um componente Root dentro da pasta components e chamo no index.js.

Repare que é muito relativo a cada projeto.

Eu particularmente, gostei da sua estrutura, ficou legal.

Espero ter ajudado.

Oi David

Complementando o Matheus, caso queira saber mais sobre o React Router V4, temos um Alura+ explicando como funciona e algumas práticas.

Boa noite, David! Como vai?

Normalmente o roteamento vai no index.js mesmo! Mas, como o próprio Matheus indicou, é possível fazer de outras formas e isso normalmente vai ficar por conta da equipe decidir.

Contudo, uma coisa importante a se observar é que se a equipe optar por encapsular o roteamento num componente externo ao index.js o ideal é dar um nome semântico a esse componente de roteamento! De forma que ao bater o olho nele todos saibam que se trata do lugar onde fica o roteamento da aplicação!

Agora uma dica! Percebi que vc está seguindo o curso antigo de React e aqui na Alura estão sendo lançados cursos atualizados desse tema! Segue os links!

https://cursos.alura.com.br/course/react-componentes-reutilizaveis

https://cursos.alura.com.br/course/react-validacao-rotas-api

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Ótima explanação! Muito obrigado a todos, dúvidas esclarecidas.

Magina David, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.