In che modo React Router è diverso dal routing convenzionale?

React Router?

React Router è un'API per applicazioni React. La maggior parte del codice attuale è scritto con React Router 3, anche se è stata rilasciata la versione 4. React Router usa il routing dinamico.

Quando diciamo routing dinamico, intendiamo il routing che avviene mentre la tua app sta facendo il rendering, non in una configurazione o convenzione al di fuori di un'app in esecuzione. Questo significa che quasi tutto è un componente in React Router.- React Training

Perché usare React Router?

React Router, e il routing dinamico, lato client, ci permette di costruire un'applicazione web a pagina singola con navigazione senza che la pagina venga aggiornata durante la navigazione dell'utente. React Router usa la struttura dei componenti per chiamare i componenti, che visualizzano le informazioni appropriate.

Impedendo un refresh della pagina, e usando Router o Link, che è spiegato più approfonditamente in seguito, si evita il flash di uno schermo bianco o di una pagina bianca. Questo è un modo sempre più comune di avere un'esperienza utente senza soluzione di continuità. React router permette anche all'utente di utilizzare le funzionalità del browser come il pulsante indietro e il refresh della pagina mantenendo la corretta visualizzazione dell'applicazione.

Cosa succede quando si ha bisogno di navigare in DUE sistemi di routing?

Un'API è qualsiasi posto dove un pezzo di codice parla con un altro pezzo di codice, ma spesso la usiamo per indicare una risorsa esterna di qualcuno che mi dà dei valori, o la nostra risorsa interna di database.

Se state usando un frontend e un backend, e state potenzialmente scrivendo in più lingue che non hanno necessariamente le stesse convenzioni di routing, non preoccupatevi! Il backend funziona solo come un'API, e l'utente non ci interagisce affatto. 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 . Alcune persone preferiscono riferirsi semplicemente al componente come Router, quindi potreste vederlo con l'alias o scegliere di assegnargli un alias nel codice, nel qual caso sarà indicato come finché sarà importato con un alias.

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. Con React Router, tuttavia, il componente Router deve essere il genitore più alto. 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? La sintassi "component=" è come un riferimento per una funzione di callback. Poiché i componenti sono funzioni, e le funzioni possono essere referenziate, allora si può fare riferimento a un componente nello stesso modo!

Al suo livello più elementare, questo è il routing lato client

Note aggiuntive

1. Impostare il percorso a solo "/" - effettivamente avvolge, o si presenta in ogni pagina. Questo è particolarmente utile per cose come una barra di navigazione, un piè di pagina, un pulsante di accesso/uscita. 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). Non funziona allo stesso modo con 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