Alguém já conseguiu criar as rotas da aula 06 com react-router4? poderia postar um exemplo?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguém já conseguiu criar as rotas da aula 06 com react-router4? poderia postar um exemplo?
Oi Luiz, estou devendo adicionar um exemplo com o 4, vou tentar fazer isso até a próxima segunda. Minha sugestão é que vc continue a versão sugerida pelo treinamento, dado que os conceitos não mudam muito...
na verdade na conclui o treinamento com a outra versão, tudo show de bola. Neste momento estou usando o conhecimento em outro projeto. Fico no aguardo do seu exemplo Alberto Roberto. Obrigado.
segui esse video: https://www.youtube.com/watch?v=Zjacr7_GZR0 meu codigo ficou assim:
...
import {Link, Route, BrowserRouter as Router, Switch} from 'react-router-dom';
...
<Router>
<div id="layout">
<nav id="menu">
<div className="pure-menu">
<a className="pure-menu-heading" href="#">POntua</a>
<ul className="pure-menu-list">
<li className="pure-menu-item"><Link to="/" className="pure-menu-link">Login</Link></li>
<li className="pure-menu-item"><Link to="/servidores" className="pure-menu-link">Sevidores</Link></li>
<li className="pure-menu-item" className="menu-item-divided pure-menu-selected">
<a href="#" className="pure-menu-link">Services</a>
</li>
<li className="pure-menu-item"><a href="#" className="pure-menu-link">Contact</a></li>
</ul>
</div>
</nav>
<div>
<Switch>
<Route path="/" exact component={ Login }/>
<Route path="/servidores" component={ Servidores }/>
<Route path="/promocao" component={ Promocao }/>
</Switch>
</div>
</div>
</Router>esse é o arquivo App.js em index.js fica dessa forma:
ReactDOM.render(
(
<App/>
),
document.getElementById('root')
);Vou aguardar o codigo do professor Roberto, que deve ter uma solucao mil vezes melhor que esta.
Eu entrei no curso de React agora e via npm já veio o react-router 4.0.1, ou seja, a solução da aula não funcionou.
Eu vou tentar a solução do colega e ver se funciona.
Aguardo atualização dessa aula.
[https://github.com/luizcarlospedrosogomes/pontua/tree/master/pontua-cliente-react] neste repositório voce tem um exemplo funcional.
vlw kra, eu já usei o teu exemplo e dei uma olhada na documentação deles e consegui resolver!
Ou pessoal, sei que foi marcado como solucionado, mas vou deixar como ficou meu código com o exercício da aula.
Dentro do App.js eu continuo chamando o. A única coisa que eu mudei no App.js é que eu componentizei o menu!
{this.props.children}Meu arquivo de rota
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
import Home from './componentes/Home';
import AutorBox from './componentes/AutorBox';
const routes = (
<App>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/autor" component={AutorBox} />
<Route exact path="/livros" />
</Switch>
</App>
);
ReactDOM.render(
(
<Router>
{routes}
</Router>
),
document.getElementById('root')
);
No último item da Aula 06 tem uma explicação com o react-router 4.