React Router

#react #javascript

What is React Router?

React Router is the standard routing library for React. React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. It is said to be:

“React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.”

Installing React Router:

In our app we will have our main Parent being the Index. Then we will have App, User & About as our children component.

npm install react-router-dom
npm start  //to run  dev server

Open up the index.js file and import all three components. e.g.

 //index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import Users from './users'
import About from ‘./about'

ReactDOM.render(<App />, document.getElementById('root'))

React router gives us three components [Route,Link,BrowserRouter] which help us to implement the routing. So we will add the following to the code up above.

import { Route, Link, BrowserRouter as Router } from ‘react-router-dom'

The router component looks like this:

<Route path="/" component={} />

Where the path is the specific path and the component is which component user needs to see when they will navigate to that path. Both being props of Route.

So for our example it would look like this:

//index.js
const routes = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)

On App we use ‘exact’ path because The exact prop is used to define if there is an exactly the requested path.

What is a Link?

A Link is the primary way to allow users to navigate around your application. If we had a navigation bar and we put About This means that when someone clicks About in our nav Bar then this would redirect them to the About page without having to refresh the page. As well as our URL will change. So for our app we can do:

//index.js
const routes = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/about" component={About} />
    </div>
  </Router>
)

Each Link to will be a bullet point, underlined and a clickable link which will lead you to its path when clicked.

What is Switch?

Switch component helps us to render the components only when path matches otherwise it fallbacks to the not found component.

So we can create a Unkown/404 component:

import React from 'react'
const UnkownPage = () => <h1>404: Page not Found</h1>
export default UnkownPage

Now we can write this:

//index.js
const routes = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/about" component={About} />
        <Route component={UnkownPage} />
      </Switch>
    </div>
  </Router>
)

It will go through and try render each component and it none work then it will go to the Unknown Page.

So Our Final Index.js Page will look like this:

//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import About from './about'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/about" component={About} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))