Navigation

This guide covers the basics of navigation within a React Storefront app.

Use the react-storefront/Link component to render all links, including those that to point to pages outside of the PWA.

Client Side Navigation

By default, clicking a Link element results in client-side navigation. Here's an example:

import Link from 'react-storefront/Link'

<Link to="/about">About Us</Link>

Server Side Navigation

You can override this behavior and cause the browser to reload by adding a server prop:

<Link to="/some/non/pwa/page" server>Some page outside the PWA</Link>

By default all links are processed client-side in React Storefront. If you want to override this behavior, for example when displaying <a> tags from CMS content, you can force any link to reload the page by adding a data-reload="on" attribute.

Sometimes, when porting an existing app to a PWA, you need to preserve a URL scheme that doesn't indicate the type of page being rendered. For example, does /shirts point to a category or subcategory? It would be ideal if we could change the URL to something like /category/shirts, but often times this is not possible because of the negative effects on SEO. We can get around this by setting app.page using Link's state prop:

<Link to="/shirts" state={{ page: 'Category' }}>Shirts</Link>

When clicked, the object specified in the state prop will be immediately applied to the app state. This is essential for displaying the correct skeleton while data is being fetched from the server.

Changing the URL Programmatically

You can inject the history object into your component to navigate programmatically:

import React, { Component } from 'react'
import Button from '@material-ui/core/Button'
import { inject } from 'mobx-react'

@inject('history')
export default class MyComponent extends Component {

  render() {
    <Button onClick={this.onClick}>Go to Home</Button>
  }

  onClick = () => {
    this.props.history.push('/')
  }

}

You can also access history via window.moov.history. This is helpful for changing the location from within a model action.