# React Router: change component based on current page

**URL:** <https://forum.kirupa.com/t/react-router-change-component-based-on-current-page/638394>\
**Category:** web dev\
**Created:** [June 22, 2018, 12:40am UTC](https://forum.kirupa.com/t/react-router-change-component-based-on-current-page/638394 "2018-06-22T00:40:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielcolinjames](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@danielcolinjames](https://forum.kirupa.com/u/danielcolinjames)\
**Post date:** [June 22, 2018, 12:40am UTC](https://forum.kirupa.com/t/react-router-change-component-based-on-current-page/638394/1 "2018-06-22T00:40:16Z")

</div>

I’ve been looking at this tutorial: [https://www.kirupa.com/react/creating\_single\_page\_app\_react\_using\_react\_router.htm](https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)

and my current setup is pretty similar to that example.

The structure of my app right now is basically:

```
<BrowserRouter>
        <div className="App">
          <Header>
          </Header>

          <Switch>
            <Route exact path="/" render={pageOne} />
            <Route path="/pagetwo/" render={pageTwo} />
          </Switch>
        </div>
      </BrowserRouter>

```

And then `<Link>` components inside `pageOne` and `pageTwo` to link to each other

How might I make `Header`'s height change based on the current page? I want `Header` to show up on each “page”, and not have to re-render it when changing pages, but I want it to show up with a smaller height on `pageTwo` than on `pageOne`.

Is there any easy way to do this? One thing I could do is apply CSS attributes to the Header with JavaScript code, but that doesn’t seem very elegant.

Any help would be appreciated!

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [June 24, 2018, 8:47pm UTC](https://forum.kirupa.com/t/react-router-change-component-based-on-current-page/638394/2 "2018-06-24T20:47:56Z")

</div>

What method are you using to style your components? I like styled-components as it makes markup cleaner, it’s very familiar for the most part as simple CSS (SASS), and then there’s more, added jsx logic.

I would pass a prop to your header based on which route component is **true**.

```
const Header = styled.header`
    height: ${props => (props.headerHeight ? '2rem' : '6rem')};
`

<Header headerHeight={this.props.headerHeight}>
    Header content.
</Header>

```

It should be easy to place a **\<**  **Link**  **\>** component on any view as long as you have set up your routes and make sure to add:

```
import { Link } from 'react-router-dom'

```

to the top of your code on each view or the components that contain your links.

Let me know if that helps 🙂