gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: update react router guide article (#28612)

Browse Source
This commit is contained in:
Karthik Rao
2019-03-26 21:43:24 +05:30
committed by Christopher McCormack
parent 07c9173ad4
commit 532b1d2232
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
guide/english/react/react-router/index.md
View File

@ -1,9 +1,10 @@
--- ---
title: React Router title: React Router
--- ---
## React Router
### Installation # React Router
## Installation
React Router has been broken into three packages: `react-router`, `react-router-dom`, and `react-router-native`. React Router has been broken into three packages: `react-router`, `react-router-dom`, and `react-router-native`.
@ -13,20 +14,30 @@ We are building a website (something that will be run in browsers), so we will i
`npm install --save react-router-dom` `npm install --save react-router-dom`
### The Router ## The Router
When starting a new project, you need to determine which type of router to use. For browser-based projects, there are <BrowserRouter> and <HashRouter> components. The `<BrowserRouter>` should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the <HashRouter> should be used for static websites (where the server can only respond to requests for files that it knows about). When starting a new project, you need to determine which type of router to use. For browser-based projects, there are `<BrowserRouter>` and `<HashRouter>` components. The `<BrowserRouter>` should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the <HashRouter> should be used for static websites (where the server can only respond to requests for files that it knows about).
Usually it is preferable to use a `<BrowserRouter>`, but if your website will be hosted on a server that only serves static files, then the `<HashRouter>` is a good solution. Usually it is preferable to use a `<BrowserRouter>`, but if your website will be hosted on a server that only serves static files, then the `<HashRouter>` is a good solution.
For our project, we will assume that the website will be backed by a dynamic server, so our router component of choice is the `<BrowserRouter>`. For our project, we will assume that the website will be backed by a dynamic server, so our router component of choice is the `<BrowserRouter>`.
### Import Statement ## Import Statement
```javascript ```javascript
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
``` ```
### IndexRoute and Links ## Setting up routes
First we need to map the various routes of the application with the corresponding component to route to. Suppose we want to setup routes for `Home` and `Address` components, inside the `render()` method of our application's root component we configure it like this:
```
<Router>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/address' component={Address} />
</Switch>
</Router>
```
## IndexRoute and Links
Now, let’s add navigation to get us between pages. Now, let’s add navigation to get us between pages.
To do this, we will be using the `<Link>` component. `<Link>` is similar to using an html anchor tag. To do this, we will be using the `<Link>` component. `<Link>` is similar to using an html anchor tag.
@ -45,7 +56,7 @@ const Nav = () => (
) )
``` ```
### Handling Route Updates ## Handling Route Updates
Once you've clicked on a Link, it needs to take you your destination. This involves updating the URI, analyzing it, and then taking the correct action based on the updated state of your browser tab. Once you've clicked on a Link, it needs to take you your destination. This involves updating the URI, analyzing it, and then taking the correct action based on the updated state of your browser tab.
To do this, we will be using the `<Router>` and `<Route>` components. Think of the Router as your websites own mini internet and each Route is a web page. When you click a `<Link>`, it's basically like click an anchor that navigates within the context of your tab. But, much like the pioneers of another era, first we have to setup the internet and tell it what URI's match to what content. To do this, we will be using the `<Router>` and `<Route>` components. Think of the Router as your websites own mini internet and each Route is a web page. When you click a `<Link>`, it's basically like click an anchor that navigates within the context of your tab. But, much like the pioneers of another era, first we have to setup the internet and tell it what URI's match to what content.
@ -61,7 +72,7 @@ To do this, we will be using the `<Router>` and `<Route>` components. Think of t
So now when the user clicks on the Nav component links, Home or Address, and the tab moves to URI/ or URI/address, the `<Router>` will go down the right component tree, and return the correct contents, just like if you cURL Google, it'll send you back the contents of the page. So now when the user clicks on the Nav component links, Home or Address, and the tab moves to URI/ or URI/address, the `<Router>` will go down the right component tree, and return the correct contents, just like if you cURL Google, it'll send you back the contents of the page.
### Rendering Your App ## Rendering Your App
Now we have all the pieces, and they just need to come together. My experience (although YMMV), is that folks often throw their routes into a separate file and import them into their root JavaScript file, where they also are importing their router of choice (i.e. BrowserRouter, HashRouter). It often ends up looking something like this: Now we have all the pieces, and they just need to come together. My experience (although YMMV), is that folks often throw their routes into a separate file and import them into their root JavaScript file, where they also are importing their router of choice (i.e. BrowserRouter, HashRouter). It often ends up looking something like this:
```javascript ```javascript
@ -88,7 +99,7 @@ const routes = (
``` ```
You then just have to create each of those components, drop in the Nav, and you can jump between pages all day. There's of course a ton more to do on top of that - you may want to add Redux, you might want to be generating history with your actions, you might want loading between your jumps when they're taking a while...and that's where the adventure really begins. You then just have to create each of those components, drop in the Nav, and you can jump between pages all day. There's of course a ton more to do on top of that - you may want to add Redux, you might want to be generating history with your actions, you might want loading between your jumps when they're taking a while...and that's where the adventure really begins.
### NavLink, Redirect and Programmatic redirects ## NavLink, Redirect and Programmatic redirects
In addition to using `<Link>` for navigating around your application, `<NavLink>` is yet another approach. In addition to using `<Link>` for navigating around your application, `<NavLink>` is yet another approach.
The difference between `<Link>` and `<NavLink>` is that, if you inspect the element with `<NavLink>` you will find a class set to **active**. This is useful when you would like to apply some custom styles to your active links. The difference between `<Link>` and `<NavLink>` is that, if you inspect the element with `<NavLink>` you will find a class set to **active**. This is useful when you would like to apply some custom styles to your active links.