Today I Learned

hashrocket A Hashrocket project

@reach/router Renders To A Div

Check out the following snippet that uses @reach/router.

import { Router } from '@reach/router';

const Home = () => <h1>Home</h1>;

const App = () => {
  return (
    <div className="main">
        <Home path="/home" />

When you visit '/home', this will render in the DOM as:

<div class="main">
  <div tabindex="-1" role="group" style="outline: none;">

Notice the extra div -- that is what <Router> renders to as part of @reach/router's accessibility features. This may throw off the structure or styling of your app. This can be fixed. Any props that you give to <Router> will be passed down to that div. For instance, you could remove the most outer div and put className="main" on the <Router>.


See More #react TILs
Looking for help? At Hashrocket, our JavaScript experts launch scalable, performant apps on the Web, Android and iOS. Contact us and find out how we can help you.