CODEWITHSUNDEEP
javascriptreactjsreact-component
Raghavendra HG
Raghavendra HG

Reputation: 11

How to hide/show a component inside another component in ReactJS

I have my application looking something like below..

import FirstComponent from "./components/firstComponent";
import NextComponent from "./components/nextComponent";
import MyProgressComponent from "./components/progressComponent";

class App extends React.Component {
render() {
  return (
    <Router>
        <div>
            <MyProgressComponent />
            <Route path="/" exact component={FirstComponent} />
            <Route path="/nextComponent" component={NextComponent} />   
        </div>
    </Router>
  );
}
}

As we can see 'MyProgressComponent' is visible when we navigate between 'http://localhost:3000/' and 'http://localhost:3000/nextComponent' because it is directly nested under Router component in App component. But I want 'MyProgressComponent' to be visible only in 'http://localhost:3000/nextComponent' and hidden in 'http://localhost:3000/'. Any suggestion ?

I can do this by importing 'MyProgressComponent' inside each component wherever required but I don't want to duplicate it in each component.

Upvotes: 1

Views: 725

Answers (3)

Jaya Krishna
Jaya Krishna

Reputation: 313

You can render multiple components using the below syntax 

<Route path="/nextComponent" render={() => 
 <>
  <MyProgressComponent />
  <NextComponent />
 </>
} 
/>

Upvotes: 1

indolentdeveloper
indolentdeveloper

Reputation: 1313

you can use switch provided by router to achieve this.

Something like below should work for you.

<Switch>
  <Route exact path="/nextComponent" component={MyProgressComponent} />
</Switch>
<Switch>
  <Route path="/" exact component={FirstComponent} />
  <Route path="/nextComponent" component={NextComponent} /> 
</Switch>

more documentation is available here https://reacttraining.com/react-router/web/guides/basic-components

Upvotes: 0

Prabhat Kumar
Prabhat Kumar

Reputation: 530

Based on @Crocsx comment you can apply following check on your code.

<Router>
  <div>
    {this.props.location.pathname === "/nextComponent" ?  <MyProgressComponent />: null}
    <Route path="/" exact component={FirstComponent} />
    <Route path="/nextComponent" component={NextComponent} />
  </div>
</Router>

Upvotes: 0

Related Questions