Click here to Skip to main content
15,867,306 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am working on to hide the components where a page is rendered out of various components.
Below is the example of the rendered page with various components.

How can hide the components when ever the url changes and what could be the best way to hide components for dynamic urls?

1. How can i hide the components without effects CSS?
2. how can i detect a part of the url and render or hide components while rendering the whole page?

```
import React, { Component } from 'react';
import all the compoent A, B AND C

class App extends Component {
   constructor(props) {
     super(props);
    this.state = {};
  }
  

  render() {
    return (
      <div>
               <Component A/>
               <Component B/>
              <Component C/>

      </div>
    );
  }
}

export default App;

```


What I have tried:

I have got to the point where I can hide the components using 
# 1 . method using an if else statement
```
if(condition)
{
render{}
else{
render{}
}
```
#2 . use tenary operator according to the condition that i want 


The common solution that went to do is 
window.location.href ---> and check the string with the url string that i want and use the if else condtion.

Could anyone guide a better way to hide the components while rendering with url change and make it more configurable?
Posted
Updated 4-Jun-22 22:00pm

1 solution

Use React Router: React Router | Tutorial[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900