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?

Answer 1

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);

Answer 2

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.