0

I have code as below. I want Navigation component to appear on Home and About page, but not in Contact. How can I do that ?

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Error from './components/Error';
import Navigation from './components/Navigation';
 
class App extends Component {
  render() {
    return (      
       <BrowserRouter>
        <div>
          <Navigation />
            <Switch>
             <Route path="/" component={Home} exact/>
             <Route path="/about" component={About}/>
             <Route path="/contact" component={Contact}/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}
 
export default App;
jslover69
  • 11
  • 1
  • Does this answer your question? [React: Hide a Component on a specific Route](https://stackoverflow.com/questions/50777333/react-hide-a-component-on-a-specific-route) – Andy Ray Aug 30 '21 at 21:24

1 Answers1

0

Just add a condition to check if your route is contact or not and don't render the content of Navigation by returning null. You can get the url using window.location.

Sanish Joseph
  • 2,140
  • 3
  • 15
  • 28