mirror of
https://github.com/jbranchaud/til
synced 2026-01-02 22:58:01 +00:00
Add @reach/router Renders To A Div as a react til
This commit is contained in:
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
|
||||
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
||||
|
||||
_732 TILs and counting..._
|
||||
_733 TILs and counting..._
|
||||
|
||||
---
|
||||
|
||||
@@ -502,6 +502,7 @@ _732 TILs and counting..._
|
||||
- [Passing Props Down To React-Router Route](react/passing-props-down-to-react-router-route.md)
|
||||
- [Proxy To An API Server In Development With CRA](react/proxy-to-an-api-server-in-development-with-cra.md)
|
||||
- [Quickly Search For A Component With React DevTools](react/quickly-search-for-a-component-with-react-devtools.md)
|
||||
- [@reach/router Renders To A Div](react/reach-router-renders-to-a-div.md)
|
||||
- [Read Only Input Elements](react/read-only-input-elements.md)
|
||||
- [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.md)
|
||||
- [Spelunking Through Components With Enzyme's Dive](react/spelunking-through-components-with-enzymes-dive.md)
|
||||
|
||||
38
react/reach-router-renders-to-a-div.md
Normal file
38
react/reach-router-renders-to-a-div.md
Normal file
@@ -0,0 +1,38 @@
|
||||
# @reach/router Renders To A Div
|
||||
|
||||
Check out the following snippet that uses
|
||||
[`@reach/router`](https://reach.tech/router).
|
||||
|
||||
```javascript
|
||||
import { Router } from '@reach/router';
|
||||
|
||||
const Home = () => <h1>Home</h1>;
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div className="main">
|
||||
<Router>
|
||||
<Home path="/home" />
|
||||
</Router>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
When you visit '/home', this will render in the DOM as:
|
||||
|
||||
```html
|
||||
<div class="main">
|
||||
<div tabindex="-1" role="group" style="outline: none;">
|
||||
<h1>Home<h1>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
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>`.
|
||||
|
||||
[source](https://github.com/reach/router/issues/63#issuecomment-395988602)
|
||||
Reference in New Issue
Block a user