React Tapas 5: Routing

TL;DR: routing in react has nothing special. It's just a normal component with an if/else and some nice declarative (sorry Oriol) API over it. This makes it very simple and flexible.

1. Write your own custom (hash) router #

Routing in react is deceptively simple. For example, using hash to route would be something like:

const App = () => {
  if (window.location.hash === "#about") {
     return <AboutPage />
  } else {
     return <HomePage />
}

Because we don't like the if/else, we can create a Route component to make it more declarative:

const Route = ({ children, path }) => {
  return window.location.hash === path ? children : null
}

Here, children is a React prop meaning "all markup inside me".

The usage of that component should be like this:

const App () => {
  return (
   <div>
     <Route path="#home">
        <HomePage />
     </Route>
     <Route path="#about">
        <AboutPage />
     </Route>
   </div>
  )
}

That basically says: if hash is "#home" render , if it's "#about" render

2. React router #

Of course, we don't want a hash router neither write ourselves. The most used router is react-router (reach-router is gaining momentum).

UPDATE: I've just seen this https://reacttraining.com/blog/reach-react-router-future/.

TL;DR: react-router and reach-router will merge

This is the same with react router:

import { BrowserRouter, Switch, Route } from "react-router-dom";

const App () => {
   return (
    <BrowserRouter>
        <Route exact path="/">
          <HomePage />
        </Route>
        <Route exact path="/about">
          <AboutPage />
        </Route>
    </BrowserRouter>
   )
}

Normally we use a to ensure only one route is matched. In the above example is not needed (as we've seen in the video), but it's required if you want, for example, add a 404 route: import { BrowserRouter, Switch, Route } from "react-router-dom";

const App () => {
   return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <HomePage />
        </Route>
        <Route exact path="/about">
          <AboutPage />
        </Route>
        <Route path="*">
          <NotFoundPage />
        </Route>
      </Switch>
    </BrowserRouter>
   )
}

In the above example, the Switch ensures that NotFoundPage is NOT rendered if any other route is matched before (order matters)

3. Composing routes and nested routes #

Since a router is, basically, an if/else clause, nothing prevent us to use different routers or adding routers to any component (to create nested routes).

For example:

const Main = () => (
  <Switch>
     <Route path="/">Main at home</Route>
     <Route path="/about">Main at about</Route>
  </Switch>
)

const Sidebar = () => (
  <Switch>
     <Route path="/">Sidebar at home</Route>
     <Route path="/about">Sidebar at about</Route>
  </Switch>
)

const App = () => {
  return <BrowserRouter>
    <Main />
    <Sidebar />
  </BroserRouter>
}

4. react-router Link #

One thing I've forgot to mention in the video is that, in order to create anchor links, we use component from react-router instead of

const HomePage = () => {
  return (<div>
    <Link to="/about">About</Link>
  </div>)
}

I think a normal anchor would work, but provides some extra things... but I'm not sure about this.