[Bug] reach router not always setting focus on route change

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 75.43 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.10.1 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.7.0 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 64.0
    Safari: 12.1
  npmPackages:
    react: ^16.8.2 => 16.8.6
    react-dom: ^16.8.2 => 16.8.6
    react-static: ^7.0.0 => 7.0.9
    react-static-plugin-reach-router: ^7.0.0 => 7.0.8
    react-static-plugin-sitemap: ^7.0.0 => 7.0.8
    react-static-plugin-source-filesystem: ^7.0.0 => 7.0.8
  npmGlobalPackages:
    react-static: 7.0.9

Steps to Reproduce the problem

With a fresh basic react static installation

1. click on home (link remains focused)
2. click on about (link remains focused)
3. click on dynamic (content gets focused)
4. click on about (content gets focused)
5. click on home (link remains focused)

Expected Behavior

The router wrapper div should ALWAYS get focused <div tabindex="-1" role="group" style="outline: none;">

You can use a simple CSS rule to quickly visualise this:

*:focus {
  background-color: yellow;
}

If you place a couple of components directly inside of <Router> - instead of the react static <Routes> component - you will notice that the router placeholder always gets the browser focus

<Router>
  <SomeComponent path="/foo" />
  <SomeComponent path="/bar" />
</Router>

Notes

I’m under the impression this is due to the way <Routes> is rendering the static routes, maybe because of the wrapping <Location> component.

[andrezero]

Just FYI, meanwhile I completely dropped reach-router because I can’t live with the extra divs injected in my markup

[SleeplessByte]

Since @reach/router will be deprecated (new react-router will merge the two) and I believe this is in that package, I’ll close this for now.