Don't render a route on a specific path React Router Native?

Question

I am using React Router Native I want to hide a component on a specific path

<NativeRouter history={nativeHistory}>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Footer />
</NativeRouter>

In my Home Component when a link is clicked About component must render & the Footer must hide & for the rest of the routes Footer must render. Footer is a stateless component.

I have tried accessing props.location in my Footer component but its undefined since props is an empty object {}

My question how to blacklist only one path for not rendering a specific component?

score 1 · Accepted Answer · answered Aug 29 '17 at 12:46

You can use withRouter to access props.location in your Footer. Just wrap the return value with withRouter, and you will get the same props as the other components that you use as Route components.

For example, your Footer.js should be like this:

import { withRouter } from 'react-router-dom';

class Footer extends React.Component {
  render() {
    ...
    // here you can access this.props.location and this.props.match
  }
}

export default withRouter(Footer);

Awesome this is what I was looking for Thank u so much Win Chiu. — deadcoder0904, Aug 29 '17 at 18:17

score 0 · Answer 2 · answered Aug 29 '17 at 07:52

0

On your Footer component you can check the currentPath and render the component accordingly. I didn't use React Router Native so I don't really know how you can do it.

I suggest you to use some other navigation component that is more recent and still maintained. React-Navigation is one of them that I can recommend.

answered Aug 29 '17 at 07:52

bennygenel

23,896
6
65
78

Yep I tried that but moved to this since I didn't knew that how to use Footer component in all screens except for one. Also its too difficult to understand when to use Stack Navigator & Tab Navigator so I moved to this. I was thinking the same to move onto React Navigation now again. & ur answer is correct but that's the question itself. I can't access history on Footer component otherwise I would've done it already without posting it to StackOverflow – deadcoder0904 Aug 29 '17 at 08:49
Have you tried to add Footer component inside the Home component and not on rooter. This way you don't have to control the path since Footer is not included on About path. – bennygenel Aug 29 '17 at 15:35
Nope I have many components like `Home`, consider `Contact`, `Profile`, `Messages` & I don't want to duplicate code by putting `Footer` component in every other component as it will mess up with my current styling but that is one good approach so thanx. I'll try this if nothing works as I only need to modify some styles. – deadcoder0904 Aug 29 '17 at 18:14

Don't render a route on a specific path React Router Native?

2 Answers2