Router

Where and how to use it

The <Router /> component simply represents where in your application you would like your routes to appear. This is particularly useful if you need embed your route specific content inside other components.

const MyApp = () => (
  <div>
    <Header>
      // ...
    </Header>
    <Router />
    <Footer>
      // ...
    </Footer>
  </div>
);

Currently there aren't any other requirements for this component, other than it being present somewhere in your application.

Route

Exact path matching

<Route path="/foo" /> 
//  http://www.myapp.com/foo

Pattern matching

Routes can also be dynamic, giving you the flexibility to pass data from the URL through to your application. As an example, you might set up a route called /page and a page id might be required in order to make a request. You could do this by creating a route: /page/:id so that any id can be used, and the same route will be displayed.

<Route path="/:bar" />
//  http://www.myapp.com/123
//  http://www.myapp.com/abc

<Route path="/foo/:bar" />
//  http://www.myapp.com/foo/123
//  http://www.myapp.com/foo/abc

Route components

When a route is active, React will render mount the component supplied to the route definition.

const MyComponent = () => (
  // Component markup
);

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

Your route component will also be mounted with some props, passed down from the RouteProvider.

//  For the following route definition
<Route path="/foo/:id" />

//  And the URL is:
/foo/123?foo=bar

//  The following props will be available
//  in your route component

{
  location: {
    pathname: "/foo/bar/wee",
    search: "foo=bar"
  },
  resolvedData: {...},
  routeParams:{
    id: "123"
  }
}

Resolving data

To ensure data is ready when the route loads, you can provide a async function to your route definition. Before the route is displayed, TinyUniversal will ensure the route resolve has been fulfilled.

const getData = () => (
  fetch('some/url').then(res => res.json())
);

<Route component={MyComponent} path="/foo" resolve={getData} />

If your route has params (i.e. /foo/:id) then your resolve function will be provided an object with each parameter key and value.

// When the user hits the following URL
/foo/123/blah

const getData = ({ id, other }) => (
  // id = '123'
  // other = 'blah'
);

<Route component={MyComponent} path="/foo/:id/:other" resolve={getData} />

Link

The <Link /> component allows you to update the current route in the client app. Using <a /> tags will actually force a full-page reload, so it's best to use this component instead. It can be used a few different ways, either by providing the text to be displayed as a prop, or by wrapping another component or text.

<link to="/foo" text="My link" />

<Link to="/bar">
  My link
</Link>

RouteProvider

The RouterProvider component provides a number of context methods to your application and ensures the client-side routing is available when the application loads. This component will wrap your initial root component, and provide a set of methods that will be available to your app.

Context methods

getLocation()

Returns the pathname and search components from the URL.

getRoutes()

Returns the Routes as provided in both the client and server app.

getResolvedData(pathname: string)

Returns the internally cached data for the current route.

onRouteChange(location: string, isHistoryEvent: boolean)

Attempts to resolve the requested route from the provided location string (i.e. foo/bar) and resolves any required data before ensuring the route is allowed to change.

Components