Provide a way to disable rendering `div` for `Router`

[chenxsan]

Feature Request?

My root node has css like this:

display: flex;
flex-direction: column;
height: 100vh;

When Router renders a div, it breaks my layout:

I found there's no way to disable it in the code https://github.com/reach/router/blob/master/src/index.js#L336.

It would be great if I can pass false or null value to component prop of Router like this to disable rendering the div:

<Router component={null}>
 ...
</Router>

[joao-alberto]

My proposal is use Fragment when is available and let dev set the style of div when Fragment is not available.

Im most of cases the style of wrapper will be:

height: 100%;
width: 100%;

What your think @chenxsan?

[ryanflorence]

Couple of things:

• The div is necessary to manage focus, so we won't be providing a way to disable that
• Router is the div, so any props you pass to it go to your div

Therefore:

<Router id="__OkMarvin__">
 {/* ... */}
</Router>

[chenxsan]

@ryanflorence #__OkMarvin__ is set on React root node, there's no way to pass it. Also I'm using reach on server side rendering only, no client side rehydrate, so no foucs is needed in my case.

[chenxsan]

@joao-alberto Yep, I've tried <Router component={React.Fragment} />, but React.Fragment won't accept style prop causing lots of warning in console.

[ryanflorence]

You'll need to move that ID from the root node to the router, or change your CSS some other way, but we won't be making the div optional because accessibility is a primary concern for this package.

[daviestar]

Could this be reconsidered?

I am working on a site where it makes a lot of sense to stick a <Router> component inside an SVG, where it breaks with the containing div.

[daviestar]

How about when the router isn't considered primary:

<Router basepath="/timeline" primary={false}>
  // ...
</Router>

which doesn't take focus anyway?

[zxuqian]

I demand this requirement too. One of my layout component has three sections which are top level. But when it becomes the route component, the layout becomes a mess.

[adamyonk]

It would be nice to have some sort of escape hatch, like being able to pass in your own component to be used <Router as={OtherComponent}>.

[dnutels]

@adamyonk

Works for me:

import Root from './root/Root';

<Router component={Root}>
    <Dashboard path="/" default />
</Router>

@daviestar Can't you change it to like g or some other SVG element?

EDIT: in the component case, any Back/Forward actions fail with:

Uncaught TypeError: this.node.focus is not a function...

Alas...

[sshmyg]

@ryanflorence #63 (comment)
Maybe user can make a decision about accessibility? Your additional div broke all design, and if I use css-in-js it become a big problem and not helpful feature.

I think wrapper by default it's ok, but please, provide some solution how to use Router without additional wrapper. Maybe some diff component with appropriate props, or something.

Outline is largely an accessibility feature and should be available on elements to indicate focus during keyboard navigation.

So outline: none; it's a bug in Router accessibility!

Thank you.

[sshmyg]

And it's very strange, first wrapper I can hide with <Router component={RouterComponent}>, but all nested routes wraps with default div. And if primary is false, than we have no any tabindex etc, just unneeded wrapper.

@ryanflorence Maybe behaviour should be the same for all routes? Top and nested.

[romanlex]

if primary is false I think needed use Fragment, not div