@shopify/react-router
A universal router for React
Last updated 12 days ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/react-router 
SYNC missed versions from official npm registry.

@shopify/react-router

Build Status License: MIT npm version npm bundle size (minified + gzip)

A universal router for React, wrapping react-router for now.

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>;
}

<Route />

See react-router docs

<Switch />

See react-router docs

<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>;
}

<Link />

TBD

withRouter()

See react-router docs

Current Tags

  • 0.0.29                                ...           latest (12 days ago)

28 Versions

  • 0.0.29                                ...           12 days ago
  • 0.0.28                                ...           18 days ago
  • 0.0.27                                ...           22 days ago
  • 0.0.26                                ...           24 days ago
  • 0.0.25                                ...           a month ago
  • 0.0.23                                ...           2 months ago
  • 0.0.22                                ...           3 months ago
  • 0.0.21                                ...           5 months ago
  • 0.0.20                                ...           6 months ago
  • 0.0.19                                ...           6 months ago
  • 0.0.18                                ...           7 months ago
  • 0.0.17                                ...           8 months ago
  • 0.0.16                                ...           8 months ago
  • 0.0.15                                ...           8 months ago
  • 0.0.14                                ...           8 months ago
  • 0.0.13                                ...           8 months ago
  • 0.0.12                                ...           8 months ago
  • 0.0.11                                ...           9 months ago
  • 0.0.10                                ...           9 months ago
  • 0.0.9                                ...           9 months ago
  • 0.0.7                                ...           9 months ago
  • 0.0.8                                ...           9 months ago
  • 0.0.6                                ...           10 months ago
  • 0.0.5                                ...           10 months ago
  • 0.0.4                                ...           10 months ago
  • 0.0.3                                ...           10 months ago
  • 0.0.2                                ...           10 months ago
  • 0.0.1                                ...           10 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 6
Last Month 31
Dependencies (3)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |