Deploy

Fala aí Richard, tudo bem? Provavelmente você está fazendo alguma coisa de errado, preciso entender melhor como foi o deploy que você fez e as configurações.

Fico no aguardo.

Então Matheus, eu rodei o comando npm run build, mas antes eu configurei no package.json o caminho homepage: e coloquei o endereço do meu url. Pelo que percebi essa versão do react router 3 usada no curso não funcionou. Eu consegui fazer esse build com a parte do 1 curso de react, mas eu alterei o react router 3 para o 4. Já na Parte 2 não consegui tem algumas coisas a mais no router que ainda não consegui migrar para a versão 4

Fala aí Richard, bom, o estranho é não estar dando problema, onde você está hospedando sua aplicação? Você configurou a rota para retornar o index.html do seu build?

De qualquer maneira, consegue me mandar o projeto? Vou fazer o build dele para ver se o ocorre o problema (acho que pode ser alguma configuração no servidor).

Espero ter ajudado.

Seguem os arquivos do projeto

https://drive.google.com/drive/folders/1ub8E8sdhCTLM6SxvBXtMliemjJS7bC8X

Fala aí Richard, o problema está justamente na definição do homepage no seu package.json.

Se você tirá-lo vai resolver o problema da tela branca.

Espero ter ajudado.

Resolve em partes, pois não consegui fazer funcionar com react router 4

Chegou a retirar o homepage do seu package.json?

Se sim era para ter funcionado.

Espero ter ajudado.

Retirei sim mas não funcionou

Estranho, era para ter funcionado, onde e como você está deployando ele?

Fico no aguardo.

Eu estou enviando para a minha hospedagem. De site.

Qual hospedagem você está usando? Como você está deployando ele? Qual servidor você está usando para servidor a aplicação?

Preciso saber dos detalhes para conseguir entender o problema e lhe ajudar.

Fico no aguardo.

Uma hospedagem hostgator, hospedagem php servidor linux eu fiz o build local e fiz o upload dos arquivos para o servidor.

O primeiro curso funcionou, mas essa segunda parte eu não consegui adaptar a parte do ReactRouter para a nova versão.

Certo, você deve estar tendo problemas por causa das rotas do Router.

Não sei como você está criando as rotas, mas, se estiver usando o Router com history tente mudar seu history de createBrowserHistory para createHashHistory apensa para testar.

Se não, se estiver usando o BrowserRouter tente mudar para HashRouter (pode ser que seja necessário algumas adaptações).

Espero ter ajudado.

Ainda não consegui meus arquivos estão aqui com as últimas alterações https://drive.google.com/drive/folders/1ub8E8sdhCTLM6SxvBXtMliemjJS7bC8X

Não consegui fazer o download Richard, consegue zipar a pasta?

Fico no aguardo.

Matheus, segue o arquivo zip https://drive.google.com/open?id=1rT2lO7m8Eqna4hqmoza9JMJoEFU_zIza

Richard a aplicação está funcionando corretamente, o problema está no servidor onde você está deployando a mesma.

Eu fiz o deploy dela no Netlify e funcionou 100%:

https://angry-curran-d08947.netlify.com/#/

Vou precisar entender como você está fazendo o deploy dela, como está as configurações do servidor, etc...

Abraços

Matheus, a tela inicial funciona, mas quando loga não carregam as informações da uma página em branco.

Fala ai Richard, tudo bem? O problema da tela branca é porque nenhum rota estava sendo encontrada, para criar uma rota de NotFound podemos adicionar um último Route sem path com component ou render:

<Router history={history}>            
        <Switch>
        <Route exact path="/" component={Login}/>    
        <Route path="/timeline:/login" component={App} onEnter={verificaAutenticacao}/>
        <Route path="/logout" component={Logout}/>
        <Route render={() => <h1>NotFound</h1>}/>
    </Switch>      
</Router>

Dessa maneira, se nenhuma rota funcionar, ele vai renderizar o NotFound.

Mas, porque ele não estava achando nenhuma rota? Porque sua rota para timeline possuí um pequeno erro em seu path.

Veja o path:

<Route path="/timeline:/login" component={App} onEnter={verificaAutenticacao}/>

O /login deveria ser opcional, então precisamos mudar ele para:

<Route path="/timeline(/:login)" component={App} onEnter={verificaAutenticacao}/>

Como feito no curso, mas, essa é a maneira de definir parâmetros opcionais nas versões 1, 2 e 3, na 4 isso muda um pouco:

<Route path="/timeline/:login?" component={App} onEnter={verificaAutenticacao}/>

Depois você vai ter outro problema para pegar os parâmetros das rotas, nas versões 1, 2 e 3 faziamos:

<Timeline login={this.props.params.login} />

Mas, na versão 4 precisamos pegar o match para depois pegar os params:

<Timeline login={this.props.match.params.login} />

Vai continuar dando alguns erros, mas, você vai resolvendo por aí.

Espero ter ajudado.

Consegui, mas a parte do comentário não ficou legal. Obrigado pela ajuda Matheus :)

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

Só não esquece de marcar o tópico como solucionado, assim, o mesmo pode ajudar outros alunos com problemas iguais ou parecidos.

Abraços e bons estudos.