CODEWITHSUNDEEP
javascriptreactjsreact-router-v4
saricden
saricden

Reputation: 2342

Hide navigation on particular route in React Router V4?

As shown in this SO answer, it's possible to render components only if the path matches a given path-to-regex expression:

<Route path="/(.+)" render={(() => 
    <Navigation loggedInUser={loggedInUser} />
)}/>

The above example from the noted answer will render the Navigation component only when there is at least one character in the path after the slash.

My question is how would you format a valid path-to-regex expression that matches all paths except for "/path-without-nav" or an array of paths?

Upvotes: 0

Views: 757

Answers (1)

forJ
forJ

Reputation: 4627

Interesting concept that I never had to materialize but this might work.

First match all paths to NavComponent

Then you can create NavComponent as following

export default NavComponent extends React.Component{
    constructor(props){
        super(props);
    }

    state={
        path:this.props.match.path;
    }

    render(){
        {this.state.path.search('your path') ?
            <div>Don't Render</div>
        :     <Navigation loggedInUser={loggedInUser} />}
    }
}

Basically you render based on the state

Upvotes: 1

Related Questions