Como o React Router é diferente do roteamento convencional?

React Router?

React Router é uma API para aplicações React. A maioria do código atual é escrito com o React Router 3, embora a versão 4 tenha sido lançada. O React Router usa roteamento dinâmico.

Quando dizemos roteamento dinâmico, queremos dizer roteamento que ocorre enquanto sua aplicação está sendo renderizada, não em uma configuração ou convenção fora de uma aplicação em execução. Isso significa que quase tudo é um componente no React Router.- React Training

Por que usar React Router?

React Router, e roteamento dinâmico, do lado do cliente, nos permite construir uma aplicação web de página única com navegação sem a atualização da página à medida que o usuário navega. O React Router usa a estrutura de componentes para chamar componentes, que exibem as informações apropriadas.

Ao evitar uma atualização de página, e usando o Router ou Link, que é explicado em mais profundidade abaixo, o flash de uma tela branca ou página em branco é evitado. Esta é uma forma cada vez mais comum de se ter uma experiência de usuário mais perfeita. O Roteador React também permite ao usuário utilizar funcionalidades do navegador como o botão voltar e a página de atualização, mantendo a visão correta da aplicação.

O que acontece quando você precisa navegar por DOIS sistemas de roteamento?

Uma API é qualquer lugar onde um pedaço de código fala com outro pedaço de código, mas nós frequentemente a usamos para significar o recurso externo de alguém que me dá valores, ou o nosso próprio recurso(s) interno(s) de banco de dados.

Se você está usando um frontend e um backend, e você está potencialmente escrevendo em vários idiomas que não têm necessariamente as mesmas convenções de roteamento, não se preocupe! O backend funciona apenas como uma API, e o usuário realmente não interage com ela de forma alguma. The routes that used to manage the user experience and the routes that used to manage queries to the database are not the same.

Using React Router

First, install React Router, using either yarn or npm.

1. yarn add react-router-domnpm install react-router-dom 

Note that in the documentation and in the API, the actual component is called Browser Router . Algumas pessoas preferem simplesmente se referir ao componente como Roteador, então você pode vê-lo aliado ou optar por apelidá-lo em código, nesse caso ele será referido como desde que ele tenha sido importado com um apelido.

1. import { BrowserRouter } from ‘react-router-dom’ 
2. //alternatively, aliased 
3. import { BrowserRouter as Router} from ‘react-router-dom’ 

When not using React Router, App is often the highest parent component in React apps. Com o React Router, no entanto, o componente Roteador precisa ser o mais alto componente pai. This just lets all of the component use the power of Router, because as a parent, it passes down all of its props to its children, and thus the entire application.

To set this up most simply, in index.js, include:

1. ReactDom.render() 

React Router

Using functions similarly to using an tag, but, as mentioned above, prevents a page refresh, and looks like a React component (because it is!).

For example, if you want a link to contact information,

1. Contact Us 

Using Link will navigate the user to /contact, and the URL will change, without the page reloading!

Where does this get included in the application? The Router component functions like a control center, and connects the route path (link) with the React component that should appear on the page.

What does this accomplish? A sintaxe "component=" é como uma referência para uma função de retorno de chamada. Como componentes são funções, e funções podem ser referenciadas, então você pode referenciar um componente da mesma maneira!

No seu mais básico, isto é roteamento do lado do cliente

Notas Adicionais

1. Configurando o caminho para apenas "/" - it efetivamente envolve, ou aparece em cada página. Isto é particularmente útil para coisas como uma barra de navegação, um rodapé, um botão de alternância de sinal de entrada e saída. So, at any point that the path has “/” in it — it is a match and the component will render.
2. Relatedly, in some systems, such as rails, you could have had a route like

1. books.com/novels/1  

which would show one novel, with /books being the index page, and the /books/1 is the show page with index 1 (the first book). Não funciona da mesma forma com o React Router! To get a component to something to show up ONLY at a specific route, use the “exact” keyword.

1. Route exact path=‘/books’  

will be all the books at Online Bookstore: Books, NOOK ebooks, Music, Movies & Toys, or some sort of index page, and will notshow at path=“dogs/1”

Since React Router allows you to set your own URLs, it can be helpful to construct a list of routes along with domain modeling and wireframing and consider if the URL make sense in the context of how an application would be structured and how a user interacts with it.

3. You cannot pass down props in a function reference! Instead, use the syntax.

1. render={() => } 

To access those values, you can then use

1. Hello world from {props.myExample}

    

Resources