Why does Router render a div in the DOM?

[florian-bd]

You can see that in the examples:

<div tabindex="-1" role="group" style="outline: none;"><div><h2>Welcome</h2></div></div>

Why is that? This makes it harder to layout

[marina-workco]

The accessibility tools are not aware of the changing routes on SPA so it looses focus while transitioning. This library adds one more div wrapper that returns focus to the beginning of the page as it was refreshed. You can find similar solutions here remix-run/react-router#5210

[florian-bd]

Ok, interesting!
Thank you for answering :)

[TroyWolf]

If I understand the accessibility issue correctly, why would we ever need more than one of those extra DIV layers in our app? I am seeing one added for every nesting level in my routes. If I'm on a page that is nested 2 layers into my Router, I have 3 of those injected divs.