blah.js

/*
Gatsby doesn't need reach or react router

it needs `useLocation`

- It doesn't use the route matching algorithm
- It doesn't use nesting (it's just one bit splat route)
- It doesn't even use Link
- All it's really using is the location to know about changes

While Gatsby doesn't use it, apps do!

*/

// Client-only routes
function Blah() {
  return (
    <Router>
      <Thing path="*" />
    </Router>
  )
}

/*

What I think

- Reach should add all the hooks that React Router has
- Gatsby should only internally `useLocation`
  - Reach needs the `useLocation` hook
- We can't break client routing API
- Close up shop, maintain with security and future react compat

- Hand over to Gatsby to do whatever they want

*/

function changes() {
  const navigate = useNavigate()
  const params = useParams()
  const location = useLocation()
  const bagOStuff = useMatch()
  return <Match path="...">{bagOStuff => {}}</Match>
}

/*

React Router      | Reach
------------------|-----------------
BrowserRouter     | LocationProvider 
Routes            | Router
Route             | Comp (like User, About, etc)

*/


////////////////////////////////////////////////////////////

// TODAY
import { Router } from "@reach/router"
import Link, { navigate } from "gatsby-link"

function Something() {
  return (
    <Router>
      <User path="users/:userId" />
      <About path="about" />
    </Router>
  )
}

// Same for react route or reach router
function User({ userId }) {
  return <div>{userId}</div>
}

////////////////////////////////////////////////////////////
// v2.next
import { Router } from "@reach/router"
import Link, { navigate } from "gatsby-link"

function Something() {
  return (
    <Router>
      <User path="users/:userId" />
      <About path="about" />
    </Router>
  )
}

function User() {
  // this is the only change
  const { userId } = useParams()
  return <div>{userId}</div>
}

////////////////////////////////////////////////////////////
// v3
// - There is only react router now
// - All the APIs are the same except the Router -> Routes
// - Could probably codemod this
import { Routes } from "react-router"
import Link, { navigate } from "gatsby-link"

function Something() {
  return (
    <Routes>
      <User path="users/:userId" />
      <About path="about" />
    </Routes>
  )
}

// Same for react route or reach router
function User() {
  const { userId } = useParams()
  return <div>{userId}</div>
}