Nascent Prototype Metaverse
    Wondering what’s next for npm?Check out our public roadmap! »

    @shopify/react-router
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.12 • Public • Published

    @shopify/react-router

    Build Status 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

    Keywords

    none

    Install

    npm i @shopify/react-router

    DownloadsWeekly Downloads

    25,363

    Version

    0.2.12

    License

    MIT

    Unpacked Size

    36.8 kB

    Total Files

    63

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar