2
respostas

O browserHistory e Link não encontrados no react-router...

Oi, sobre o exercício 5 Funcionamento do react-router... Parece que o browserHistory foi removido para outra dependência chamada "history" e o Link para a "react-router-dom"...

Gostaria de confirmar se é assim agora:

Index.js

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

import './index.css';

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

App.js

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

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">
              <Link className="pure-menu-heading" to="/">CDC Admin</Link>
              <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>

          <Switch>
            <Route path="/" exact component={HomeBox} />
            <Route path="/autor" component={AutorBox} />
            <Route path="/livro" component={LivroBox} />
            <Route component={HomeBox} /> {/* No match path */}
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;
2 respostas

Opa, é que esse é o jeito do react-router 4 :(. Eles fizeram umas alterações para conseguir coisas do router tanto para web quanto para mobile.. impacta em algumas modificações do curso que não são tão fáceis de fazer.

Tanto que na explicação é sugerido instalar a versão 2.7, até a 3 também rola. De todo jeito, os conceitos são os mesmos.. minha sugestão é manter o 3 e depois parar para ver o 4.

Eu tava perdido entre 3 e 4 e após ler essa documentação resolvi todos os problemas!

https://github.com/ReactTraining/react-router/blob/25776d4dc89b8fb2f575884749766355992116b5/packages/react-router/docs/guides/migrating.md#the-router

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software