ryanflorence

import ReactDOM from "react-dom";
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "react-three-fiber";

// yarn add react-router-dom@next history
import {
  BrowserRouter,
  Routes,
  Route,
  Link,

ryanflorence

test

ryanflorence

Route Config

I think I just figured out two major things I wanted to work out:

1. Not sending the entire route config to the client, only the ones that matched and that are linked to on the page.

2. Defining routes manually in replace of, or in addition to, the conventional file-system routes

The reason I've been hesitant on (2) is because of (1). Take a highly interactive blog where each article is a full blown React component like our blog instead of just markdown you can lookup and parse on the server.

ryanflorence

// I've only used this for focus management, I'm willing to bet you don't
// actually want to do this unless it's focus management
function useUpdateEffect(effect, deps) {
  let mounted = useRef(false)

  useEffect(() => {
    if (mounted.current) {
      return effect()
    } else {
      mounted.current = true

ryanflorence

// probably just compose around useRouteData()

// loader
import { graphql } from "graphql"
import schema from "./schema"

export default async function({ params: query }) {
  return await graphql(schema, query)
}

ryanflorence

// messages.load.js
export default async function() {
  return db.read("messages")
}

// messages.js
import useMessagesSubscription from '../your/code'
import { useRouteData } from "remix"

function Messages() {

ryanflorence

import React from "react";
import { renderToNodeStream } from "react-dom/server";
import Remix, { loadRouteData } from "remix/RemixNode";
// same App as entry-web!
import App from "./App";
export default async (req, res, assets, matches) => {
  // @remix-run/firebase is calling this function and passing
  // the arguments in, @remix-run/aws or @remix-run/azure will
  // pass in whatever APIs those platforms use
  // you have total control over the server rendering, here we

ryanflorence

Migrating @reach/router to React Router v6

Note: This document is still a work in progress! Please let us know where it lacks so we can make the migration as smooth as possible!

Introduction

When we set out to build React Router v6, from the perspective of @reach/router users, we had these goals:

• Keep the bundle size low. Turns out we got it smaller than @reach/router

ryanflorence

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'home',
    states: {
      home: {
        on: {
          LOGIN: {
            target: 'dashboard',
            actions: 'recordLoginTime'
          },

ryanflorence

// Focus Management
//
// Cases:
//
// 1. Navigate to sibling:
// [a] => [b*] : focus b
// [a, x, y] => [b*] : focus b
//
// 2. Navigate to child
// [a] => [a, b*] : focus b