mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 23:28:02 +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
|
For a steady stream of TILs from a variety of rocketeers, checkout
|
||||||
[til.hashrocket.com](https://til.hashrocket.com/).
|
[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)
|
- [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)
|
- [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)
|
- [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)
|
- [Read Only Input Elements](react/read-only-input-elements.md)
|
||||||
- [Rendering Multiple Nodes With Fragments](react/rendering-multiple-nodes-with-fragments.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)
|
- [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