React - Conditionally Show Block Based on Query String Parameter Value - reactjs

Question

I have an app using React. It includes the React Router. In one of my components, I need to read the query string, and conditionally show one block if the query string parameter has a value. If the value is not present in the query string, I want to show another block.
import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {NavMenu} from './NavMenu';
export class Layout extends Component {
static displayName = Layout.name;
render() {
return {
<div>
<NavMenu /> <!-- I want to hide this is query string has hideNav=true -->
<Container> <!-- I want to use a fluid layout if the query string has hideNav=true -->
{this.prop.children}
</Container>
</div>
}
}
}
How do I conditionally render content based on the query string value.

Answer 1

Just to represent a quick example let me suggest a URL with a query string parameter what the code operates with. It's called hideNav as below:
https://yourawesomewebsite.com/?hideNav=true
As a first step:
We need to get the query string what you need work with in your render method. There are quite a couple of options to get the query parameters, let me summarize here:
1. Using the window object
let queryString = new URLSearchParams(window.location.search);
let hideNav = queryString.get('hideNav');
Read further about URLSearchParams in this link. Highlighted from the mentioned URL:
The URLSearchParams interface defines utility methods to work with the query string of a URL.
2. Using the React Router way
let queryString = this.props.match.params;
let hideNav = queryString.hideNav;
Please follow this link if you want to read further. Additionally let me highlight below the key point here:
params - (object) Key/value pairs parsed from the URL corresponding to the dynamic segments of the path
As a second step:
The code needs to use the conditional rendering based on the value.
import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {NavMenu} from './NavMenu';
export class Layout extends Component {
static displayName = Layout.name;
render() {
const hideNav = // here you can decide based on the above explanation which one you want to use
return {
<div>
{ !hideNav ? <NavMenu /> : null }
<Container fluid={hideNav}>
{this.prop.children}
</Container>
</div>
}
}
}
About fluid container you can read further here:
fluid (boolean) - Allow the Container to fill all of it's available horizontal space.
So basically rendering NavMenu once the hideNav value is true other than that React renders null. On the Container the code is using the fluid property to manipulate the horizontal space.

Answer 2

Assuming you have params in your react router routes you can get those via this.props.match.params:
export class Layout extends Component {
static displayName = Layout.name;
render() {
const {hideNav} = this.props.match.params;
return {
<div>
{!hideNav && <NavMenu />} // Render NavMenu if hideNav is false
<Container fluid={hideNav}>
{this.prop.children}
</Container>
</div>
}
}
}

Answer 3

Hi check these conditions based example
class Layout extends Component {
constructor(props) {
super(props);
this.state = {
hideNave: false
}
}
componentDidMount() {
axios.get('http://url')
.then(res => {
if (res.date) {
this.setState({
hideNave: true
})
}
});
}
render() {
return
(<div>
{ this.state.hideNave ? (<NavMenu />) : (<Container> {this.prop.children} </Container>) }
</div>)
}
}