How to use @reach/router - 10 common examples

// Fast network always
// slow initial load
// show loading quickly on initial load, don't show top level placeholder on navigation
import React from "react";
import { Router, Link, Redirect, globalHistory } from "@reach/router";
import {
  login,
  getContacts,
  getContact,
  createContact,
  updateContact,
  deleteContact
} from "./utils";
import createContext from "create-react-context";

globalHistory.listen(({ location, action }) => {
  console.log({ location, action });
});

const InvalidateContacts = createContext();
const withInvalidateContacts = Comp => props => (
  
    {invalidate => }
  
);

const NavLink = props => (
   ({
      className: isPartiallyCurrent ? "nav-link active" : "nav-link"
    })}
    {...props}

export default function useHomePageRouter() {
  const routerLocation = useLocation()
  const homeParams = buildHomeParamsFromQuery(routerLocation.search)

  /** reset to the default view for a study */
  function clearHomeParams() {
    navigate('')
  }

  useEffect(() => {
    // if this is the first render, and there are already genes specified, that means they came
    // from the URL directly
    if (homeParams.genes.length > 0) {
      // logGlobalGeneSearch(homeParams.genes, 'url')
    }
  }, [])
  return { homeParams, updateHomeParams, routerLocation, clearHomeParams }
}

import React from 'react';
import ScreenHome from './screenHome';
import ScreenMyPage from './screenMyPage';
import ScreenModal from './screenModal';
import Menu from './menu';
import { Router, createHistory, LocationProvider } from "@reach/router";
import '../platformAssets/runtime/fontManager';
import createHashSource from 'hash-source';


// listen to the browser history
let source = createHashSource();
let history = createHistory(source);

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
        
        <div>
            <menu>
            
                
                
                
            </menu></div>

MenuItem
} from "@reach/menu-button";
import {
  Router,
  Link,
  createMemorySource,
  createHistory,
  LocationProvider
} from "@reach/router";
import "@reach/menu-button/styles.css";

export let name = "With Links";

// this is because we're in an iframe and not a
// pushState server inside of storybook
let memoryHistory = createHistory(createMemorySource("/"));

export function Example() {
  return (
    
      
        
        
      
    
  );
}

function Home() {
  return (
    <div>
      <h2>Home</h2></div>

import { createMemorySource, createHistory } from '@reach/router'
import moment, { utc } from 'moment'
const { remote } = window.require('electron')
import path from 'path'
import URL from 'url-parse'

const DEFAULT_AVATAR = 'https://react.semantic-ui.com/images/wireframe/square-image.png'

export interface Message {
  name: string
  payload?: any
}

export type Screen = 'starting' | 'loading' | 'online' | 'error' | 'onboard' | 'landing'

const source = createMemorySource('/')
const history = createHistory(source)

// tslint:disable-next-line:no-empty-interface
export interface Store {}

export interface ProfileInfo {
  name: string
  avatar: string
  date: string
  address: string
}

export interface AppInfo {
  appId: string
  appName: string
  link: string

)}
        
      )
    }
  }

  const { page, location: browserLoc } = window
  if (
    // Make sure the window.page object is defined
    page &&
    // The canonical path doesn't match the actual path (i.e. the address bar)
    __PATH_PREFIX__ + page.path !== browserLoc.pathname &&
    // ...and if matchPage is specified, it also doesn't match the actual path
    (!page.matchPath ||
      !match(__PATH_PREFIX__ + page.matchPath, browserLoc.pathname)) &&
    // Ignore 404 pages, since we want to keep the same URL
    page.path !== `/404.html` &&
    !page.path.match(/^\/404\/?$/) &&
    // Also ignore the offline shell (since when using the offline plugin, all
    // pages have this canonical path)
    !page.path.match(/^\/offline-plugin-app-shell-fallback\/?$/)
  ) {
    navigate(
      __PATH_PREFIX__ + page.path + browserLoc.search + browserLoc.hash,
      { replace: true }
    )
  }

  loader
    .getResourcesForPathname(browserLoc.pathname)
    .then(resources => {

pages.some(page => {
    let pathToMatch = page.matchPath ? page.matchPath : page.path
    if (matchPath(pathToMatch, trimmedPathname)) {
      foundPage = page
      pageCache[trimmedPathname] = page
      return true
    }

    // Finally, try and match request with default document.
    if (matchPath(`${page.path}index.html`, trimmedPathname)) {
      foundPage = page
      pageCache[trimmedPathname] = page
      return true
    }

    return false
  })

pages.some(page => {
    let pathToMatch = page.matchPath ? page.matchPath : page.path
    if (matchPath(pathToMatch, trimmedPathname)) {
      foundPage = page
      pageCache[trimmedPathname] = page
      return true
    }

    // Finally, try and match request with default document.
    if (matchPath(`${page.path}index.html`, trimmedPathname)) {
      foundPage = page
      pageCache[trimmedPathname] = page
      return true
    }

    return false
  })

it('works', () => {
      const history = createHistory(window);

      
        <div>Alright, we've established some location context</div>
      ;
    });

it('works', () => {
      createHistory(window);
    });