React-Router

Opa, como ficaram? Pode postar o trecho de código e os Imports dá configuração do router?

Adiciona o browserHistory que vai!

import {Router, Route, browserHistory} from 'react-router';

ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/autor"/>
        <Route path="/livro"/>
    </Router>,
      document.getElementById('root')
);

Tenho o mesmo problema, a versão do react router mudou bastante, vou dar uma pesquisada p ver como usa isso.

React Router agora mudou demais, tem react-router-dom e o normal, e não sei qual usar

Estou lendo a documentação aqui, pelo que entendi temos que usar agora o react-router-dom, o outro é para o react native ( que gera aplicações mobile nativas ).

Instala o react-router-dom e depois usa assim que vai funcionar, já testei aqui :)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AutorBox from './components/autor';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './index.css';

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/autor" component={AutorBox} />
      <Route path="/livro" component={App} />
    </div>
  </Router>,
  document.getElementById('root')
);

Mais a frente no curso você vai ver ele citando props.children. Com a V4 também não consegui fazer.

Tive que resolver assim:

Meu Index.js ficou:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

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

e o meu App.js inclui a rota direto dentro dele.

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import { Link, BrowserRouter as Router, Route } from 'react-router-dom';
import AutorBox from './components/autor';
import Home from './components/home';

class App extends Component {

  render() {
    return (
      <Router>
        <div id="layout">
          <a href="#menu" id="menuLink" className="menu-link">
            <span></span>
          </a>
          <div id="menu">
            <div className="pure-menu">
              <a className="pure-menu-heading" href="#">Company</a>
              <ul className="pure-menu-list">
                <li className="pure-menu-item"><Link to="/" className="pure-menu-link">Home</Link></li>
                <li className="pure-menu-item"><Link to="/autor" className="pure-menu-link">Autor</Link></li>
                <li className="pure-menu-item"><Link to="/livro" className="pure-menu-link">Livro</Link></li>
              </ul>
            </div>
          </div>

          <div id="main">
            <Route exact path="/" component={Home} />
            <Route path="/autor" component={AutorBox} />
          </div>
        </div>
      </Router>
    );
  }

}

export default App;

Dessa forma consegui fazer funcionar, não sei se é a melhor solução mas foi o que eu encontrei na documentação e nesse exemplo:

https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW

Eu fazia um arquivo a parte com as rotas, mas com essa nova versão não sei como fazer adsusadh, vou voltar pra versão que eu sabia mexer uahsdusda

Tentei o downgrade e não pegou, foi depreciado mesmo, aí funcionou com o react-router-dom, muito obrigado

Aula 5

Atenção: Se você estiver na aula 5, essa dica pode te ajudar!

Diogo Leitão deu uma dica super válida. Utilizar o react-router-dom.

Eu estava tentando utilizar o react-router apenas, e estava apresentando erros, pois a versão que instalei é a 3.10.10 e eu não consegui nem a pau colocar a versão 2.8.0 que o professor indica.

A solução foi instalar o react-router-dom (npm install --save react-router-dom), e seguir o seguinte modelo, no arquivo index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './index.css';

ReactDOM.render(
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/autor" />
      <Route path="/livro" />
    </div>
  </Router>,
  document.getElementById('root')
);

Excelente, pessoal, assim funcionou. Seria legal ter um adendo no curso, alterar essa aula, de repente.

Obrigado a todos.

Alguém sabe como faz pra usar o history nessa nova versão? Por exemplo como faz agora após o login direcionar para o dashboard?

Opa gente, tem uma explicação extra no capítulo do router, justamente explicando como funciona com a nova versão => https://cursos.alura.com.br/course/react/task/27250

Seria legal criar outra vídeo aula ou colocar essa observação no início do capítulo. :)