React

React Router

One Page

Multi Page

X

One Page

Aplicacao em uma pagina só

Comum em aplicacoes

simples

MultiPage

Aplicacao dividida em paginas

Paginas divididas por

arquivos html

home.html

sobre.html

contato.html

cadastro.html

MultiPage React

Um componente 'container'

Renderiza componentes
distintos

Cada página

Componente

<Home />

<Sobre />

<Contato />

<Cadastro />

Routing

Estabelecimento de rotas

/home

/sobre

/contato

...

Como fazer Routing com React?

React Router

Como funciona?

Mesclagem

Rotas
&
Componentes

Como funciona?

Cada Rota

Componente

/home

/contato

/sobrre

<Home />

<Contato />

<Sobre />

Instalando

npm install 'react-router'

npm install 'react-router-dom'

Router

Componente principal

do Routing

<Router> é o mais basico

<BrowserRouter>

<HashRouter>

<MemoryRouter>

<NativeRouter>

<StaticRouter>

Browser Router

Usa a API do history

Mantem a UI
sincronizada com a URL

Hash Router

Faz uso do Hash da URL
para manter o sincronismo

http://www.example.org/foo.html#abcd

Memory Router

Faz o Routing sem
acessar a URL

React Native

Native Router

Router ideal para
IOS e Android
em ambientes
React native

Static Router

Router que não altera o

Location

Server Side Rendering

Como usar

Filho do <Router>

2 opcoes

Englobar
<App>
em um
<Router>

Usar um componente
para
Routing

Routes

Estabelecem uma Rota
 e a vincula a
um Componente

Routes

import {Router, Route} from "react-router-dom"
import Home from "./components/Home/Home"
import Contato from "./components/Contato/Contato"
...
<Router>

    <Route
         path="/home"
         component={Home} />

    <Route
         exact path="/"
         component={Home} />

    <Route
         path="/contato"
         component={Contato} />

</Router>

Links

Semelhante a tag <a>

Alteram a rota
automaticamente no
evento onClick

Links

import {Route, Link} from "react-router-dom";
...

<nav>
    <Link to="/home">Home | </Link>
    <Link to="/sobre">Sobre | </Link>
    <Link to="/contato">Contato | </Link>
    <Link to="/cadastro">Cadastro</Link>
</nav>

Redirect

Quando renderizado,
vai para uma
nova rota especificada

Redirect

import {Redirect} from "react-router-dom"
...

render(){

    if(usuarioLogado){
        return(
            <Redirect to="/paginaUsuario" />
        )
    }
    else{
        return(
            <Redirect to="/login" />
        )
    }

}

Switch

Navega para a primeira
Route ou Redirect
que encontrar 

Semelhante a estrutura de decisão switch

Switch

import {Router,Route,Switch} from "react-router-dom";
import Home from "./components/Home/Home";
import Contato from "./components/Contato/Contato";
import NotFound from './components/NotFound/NotFound';
...

<Router>
        <Switch>
            <Route path="/home" component={Home} />
            <Route path="/contato" component={Contato} />
            <Route component={NotFound} />
        </Switch>
<Router>

Prática

github.com/JsBatista
/workshopReact

git clone https://github... 

cd workshopReact

cd Aula-6

npm i

Criem uma NavBar
com React Router

Prática

Prática

  • Home também deve ser mostrada quando a rota for "/"

  • NotFound deve ser mostrada quando não houver match de rotas

  • Deve navegar pelos 5 componentes ao acessar a rota deles

  • Usar componente de renderizacão

  • Usar componente NavBar

Há uma má prática escondida!

Prática

Prática

  • Home também deve ser mostrada quando a rota for "/"

  • NotFound deve ser mostrada quando não houver match de rotas

  • Deve navegar pelos 5 componentes ao acessar a rota deles

  • Usar componente de renderizacão

30 min

  • Usar componente NavBar

Made with Slides.com