React Router - Ninja do Linux

React não e um framework completo, como Angular ou Ember, mas seu ecossistema e muito grande e bem organizado, disponibilizando vários pacotes para serem utilizado em conjunto com a biblioteca principal. Um desses pacotes é o react-router, que é responsável pela navegação entre os componentes da aplicação.

O Router é fornecido com alguns ganchos que permitem acessar o estado do roteador e executar a navegação de dentro de seus componentes.

Ganchos:

UseHistory
UseLocation
UseParams
UseRouteMatch

Quer aprender React.js na prática? Clique aqui para saber como.

Instalando o React Router:

npm install –save react-router-dom

Códigos:

UseHistory fornece acesso à history instancia que você pode usar para navegar.

import{ useHistory }from”react-router-dom”;
functionHomeButton(){
let history =useHistory();
functionhandleClick(){
history.push(“/home”);
}
return(
<button type=”button” onClick={handleClick}>
Go home
</button>
);
}

UseLocation retorna o Location objeto que representa a URL atual. O usuário pode pensar nisso como um useState, que retorna um novo lacation sempre que o URL mudar.

import React from”react”;
import ReactDOM from”react-dom”;
import{
BrowserRouter as Router,
Switch,
useLocation
}from”react-router-dom”;
functionusePageViews(){
let location =useLocation();
React.useEffect(() => {
ga.send([“pageview”, location.pathname]);
},[location]);
}
functionApp(){
usePageViews();
return<Switch>…</Switch>;
}
ReactDOM.render(
<Router>
<App />
</Router>,
node
);

UseParams retona um objeto de pare chave para o valor de parâmetros de URL. O usuário pode usar para acessar match.paramso atual <Route>.

import React from”react”;
import ReactDOM from”react-dom”;
import{
BrowserRouter as Router,
Switch,
Route,
useParams
}from”react-router-dom”;
functionBlogPost(){
let{ slug }=useParams();
return<div>Now showing post {slug}</div>;
}
ReactDOM.render(
<Router>
<Switch>
<Route exact path=”/”>
<HomePage />
</Route>
<Route path=”/blog/:slug”>
<BlogPost />
</Route>
</Switch>
</Router>,
node
);

Quer aprender React.js na prática? Clique aqui para saber como.

UseRouteMatch é um gancho que tenta corresponder ao URL da mesma maneira que um <Route> faria. É principalmente útil para obter acesso aos dados da correspondência sem renderizar um <Route>.