top of page
Search
  • Writer's pictureeric periou

Battling with Routes

Before I start, I would like to point out another blogger’s post which really helped me on my way in React Routing. So if you are seeking a more comprehensive guide which helped me through please go follow the link below.

Our team was building a single paged app in React. For the uninitiated React allows for the webpage to all be served up with a single html file and several JSX/Js files which hold components.

Figure 1 demonstrates the manner in which a React app is constructed. The parent function passes down properties to each component, meaning the relationship goes from parent to child, and children can not directly interact with each other, or with the parent, with some exceptions. The parent can give the children a method which can affect change in other components. The analogy which helped me was to think of all the components as being people on telephones. To call another person, a signal must be sent from the user to a switchboard and then routed back to another. What this also means is that the page is not built from individual pages, just multiple components mounted on the parent differently. This means that each component can be changed for another or everything can be replaced with an equally complex grouping of components. Similar to clothing, pants can be changed for other pants, and the whole outfit can be changed, but the human is still present. Keep these analogies in mind when thinking of Routing.

Routing is the way the app presents new information to the user, in a grander fashion. Similar to Angular’s ng-routes, the Router allows for switching between components. The simplest example would be a Link

<Link to=’/’ >Link to Hompage</Link> 

To simply explain, this is a link to the ‘/’ route, which is usually the main page, route, or home route. The Link is like HTML’s <a> tag and can also be made to link to an external site. However the Link will not necessarily take the user anywhere unless there is a route to take. The Link simply calls for a route to occur, for that a Router must be set up.

import React from 'react'
import { Router, Route, IndexRoute , hashHistory} from 'react-router';
const App = () => 
        <Router history={hashHistory}>
          <Route path='/' component={Container} >
            <IndexRoute component={Home} />
          </Route>
        </Router>

Again to give credit to the article mentioned at the beginning of the article. First import all the components and build out a component which will return the Router. The first level is hashHistory, which determines the method by which the browser will keep track of the routes in the Url bar, which is a topic for another day.

The portions following, Router, Route, and IndexRoute are the important bits. The router sets up the whole Routing block, which is a component which ‘listens’ for a set of Routes and associates them to a component.

<Route path='/' component={Homepage} /> 

The above route alone would listen for the ‘/’ route to be called and render Homepage, but if we wanted homepage to have an exclusive set of routes, which, must be accessed from that route, it has to be se up as below.

<Route path=’/’ component={Container}>
  <IndexRoute component={Home}>
  <Route path='other' component={other}/>
</Route>
<Route path='*' component={Sorry}/>

It is a little complex, but lets break it down. Route ‘/’ renders a Container, which can be anything, but maybe its just a blank canvas if that helps. Then IndexRoute says that component Home will be what renders on Container, from that route, other can be accessed. Then the tacked on pieces of the route would look like ‘/other’ which renders component other. The last Route ‘*’ is a wildcard, this will over any case that is not a Route. When someone tries to route ‘/afsafsadasa’, component Sorry is rendered.

While this is not an exhaustive list, I hope it will help you along your way to a better understanding of React Router. In the future I plan to discuss, problems I’ve encountered in putting together the client and server side; methods used to pass properties around and the differences between History types.

0 views0 comments
bottom of page