react -router 4

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.

https://cursos.alura.com.br/course/react/task/27250