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
Workshop 6 - React Router
By João Batista
Workshop 6 - React Router
- 79