@shopify/react-router

A universal router for React, wrapping react-router-dom's BrowserRouter and StaticRouter`.

Installation

yarn add @shopify/react-router

Usage

<Router />

Rendering the Router component at the top-level of your application will create the router that is provided to the rest of the React tree. It takes a single optional prop, location, that represents the current location in the server-side render of the application. This is not used or required in the client-side render of your application and can be undefined in that environment.

This value should be derived from the server-side Node http request object. If you are rendering your app with a Node based web framework (such as Koa or Express), there will be a standard convention for accessing this object within the lifecycle of each request to your server.

A typical application will have a middleware within their application chain that is responsible for rendering the React tree, and providing your main App component the location prop. It can then delegate this value to the Router on the location prop. We also provide a simple library, @shopify/react-server, for React server-side rendering.

import React from 'react';
import {Router} from '@shopify/react-router';

// Assumes location will be passed in during the
// server-side render
export function App({location}: {location?: string}) {
  return <Router location={location}>{/* rest of app tree */}</Router>;
}

<Redirect />

A Redirect component accepts a single prop, url, and will perform a redirect to that url when mounted.

import React, {useState} from 'react';
import {Redirect} from '@shopify/react-router';

function MockComponent() {
  const [redirect, setRedirect] = useState();

  async function handleClick() {
    const newThing = await createThing();

    setRedirect(`/${newThing.id}`);
  }

  if (redirect) {
    return <Redirect url={redirect} />;
  }

  return <button onClick={handleClick}>Create a new thing</button>;
}