REACTJS - Aplicação de Página �nica - #11 Roteamento

Nesse vídeo-tutorial vamos trabalhar com roteamento no REACTJS. Para criação das rotas utilizaremos o módulo REACT ROUTER DOM.

Criando rotas com REACTJS

Vamos instalar primeiramente o módulo react-router-dom.

npm install --save react-router-dom

Vamos alterar primeiramente nosso index.js chamando o componente react-router-dom.

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

ReactDOM.render(
  <BrowserRouter>
      <Switch>
          <Route path="/" exact={true} component={App}/>
          <Route path="/contato" exact={true} component={Contato}/>
      </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

Vamos criar para exemplo o componente Contato.js

import React from 'react';
import Header from './Header';
import Contact from './main/Contact';

export default class Contato extends React.Component{
    render(){
        return(
            <div>
                <Header/>
                <Contact/>
            </div>
        );
    }
}

Posteriormente vamos alterar o componente Nav.js colocando os links guiados para as rotas:

import React from 'react';
import {Link} from 'react-router-dom';

export default class Nav extends React.Component {

    render(){
        return(
            <div className="nav">
                <Link to="/">Home</Link>
                <Link to="/contato">Contato</Link>
            </div>

        );
    }
}

Sucesso nos códigos e na vida!