Reach Router error when using client-only routes: Children of <Router> must have a 'path' or 'default' prop

[dungle-scrubs]

Description

I'm following a couple of guides telling me to do the same thing in order to set up a basic client-only route in Gatsby but am running into trouble with @reach/router.

// pages/account.js

import React from 'react'
import { Link } from 'gatsby'
import { Router } from '@reach/router'
import Layout from '../components/layout'
import Login from '../components/auth/login'

const Account = (props) => {
  return (
    <Layout {...props}>
      <Router basepath="/account">
        <Login path="/login" />
      </Router>
      <Link to="/account/login">Login</Link>
    </Layout>
  )
}

export default Account

Expected result

It should properly load and create working client-only routes

Actual result

I'm getting this error:

Error in function invariant in ../node_modules/invariant/browser.js:38
<Router>: Children of <Router> must have a `path` or `default` prop, or be a `<Redirect>`. None found on element type `function Router(props) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement( BaseContext.Consumer, null, function (baseContext) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement( Location, null, function (locationContext) { return react__WEBPACK_IMPORTED_MODULE_0__.createElement(RouterImpl, _extends({}, baseContext, locationContext, props)); } ); } ); }`

I'm confused and stuck at this point because I'm including the path prop

Environment

  System:
    OS: macOS 11.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /var/folders/ww/n_5swn1j7js2r0qtlhq5bqwh0000gn/T/yarn--1617343605892-0.5966282501333506/node
    Yarn: 1.22.10 - /var/folders/ww/n_5swn1j7js2r0qtlhq5bqwh0000gn/T/yarn--1617343605892-0.5966282501333506/yarn
    npm: 7.6.0 - ~/.nvm/versions/node/v15.11.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 86.0.1
    Safari: 14.0.3

[dungle-scrubs]

Update

I have no idea why, but it seems that adding a <div> between <Layout> and <Router> is required.

This is my working code:

const Account = (props) => {
  return (
    <Layout {...props}>
      <div>
        <Router basepath="/account">
          <Login path="/login" />
        </Router>
        <Link to="/account/login">Login</Link>
      </div>
    </Layout>
  )
}

export default Account

Is this actually required, or am I missing something important? The docs I'm reading don't reflect this.

Thanks