Added rendering info & reference links (#21554)
Added a section on how to use the root file to render your routes, mentioned the possibility of a separate routes file to keep things clear and readable, and added a few useful references to follow up on
This commit is contained in:
committed by
Christopher McCormack
parent
e805f08716
commit
7f4362c7a1
@ -22,23 +22,21 @@ For our project, we will assume that the website will be backed by a dynamic ser
|
|||||||
|
|
||||||
### 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
|
### 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.
|
||||||
|
|
||||||
From the docs:
|
From the docs:
|
||||||
|
|
||||||
The primary way to allow users to navigate around your application. <Link> will render a fully accessible anchor tag with the proper href.
|
The primary way to allow users to navigate around your application. `<Link>` will render a fully accessible anchor tag with the proper href.
|
||||||
To do this, let’s first create a Nav component. Our Nav component will contain `<Link>` components, and will look like this:
|
To do this, let’s first create a Nav component. Our Nav component will contain `<Link>` components, and will look like this:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|
||||||
const Nav = () => (
|
const Nav = () => (
|
||||||
<div>
|
<div>
|
||||||
<Link to='/'>Home</Link>
|
<Link to='/'>Home</Link>
|
||||||
@ -47,6 +45,49 @@ const Nav = () => (
|
|||||||
)
|
)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
<Router>
|
||||||
|
<div>
|
||||||
|
<Route exact path="/" component={Home} />
|
||||||
|
<Route path="/address" component={Address} />
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
```
|
||||||
|
|
||||||
|
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
|
||||||
|
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
|
||||||
|
// index.js
|
||||||
|
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
|
||||||
|
import routes from './routes';
|
||||||
|
ReactDOM.render(
|
||||||
|
<Provider store={store}>
|
||||||
|
<Router>
|
||||||
|
{routes}
|
||||||
|
</Router>
|
||||||
|
), document.getElementById('root'));
|
||||||
|
<Router>
|
||||||
|
|
||||||
|
// routes.js
|
||||||
|
import Home from './home.js'
|
||||||
|
import Address from './address.js'
|
||||||
|
const routes = (
|
||||||
|
<div>
|
||||||
|
<Route exact path="/" component={Home} />
|
||||||
|
<Route path="/address" component={Address} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
```
|
||||||
|
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.
|
||||||
|
|
||||||
@ -106,5 +147,8 @@ A basic example is as follows:
|
|||||||
```
|
```
|
||||||
|
|
||||||
### Resources
|
### Resources
|
||||||
* [Redux-with-react Router](https://redux.js.org/advanced/usagewithreactrouter)
|
- [React-Router](https://reacttraining.com/react-router/)
|
||||||
|
- [React-Router w/ Redux](https://github.com/reactjs/react-router-redux)
|
||||||
|
- [React-Router History](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md)
|
||||||
|
- [Redux-with-react Router](https://redux.js.org/advanced/usagewithreactrouter)
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user