Conditionally Render CSS Based On Route (React)

Question

Here is my App.js component so far:

function App() {
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Switch>
         <Route exact path='/' component={HomepageLayout} />
         <Route exact path='/post/:id' component={Post}/>

        </Switch>
      </Router>
    </div>
  );
}

I need to render the CSS value of a class based on the route that is being rendered. When the HomepageLayout component is rendered, I need the following:

styles.css

 .ui.inverted.vertical.center.aligned.segment{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    z-index: 2;  
 }

Then, I need to change the values for this target when the Post component is rendered so that the styles are basically removed:

styles.css

 .ui.inverted.vertical.center.aligned.segment{
    position: none;
    left: none;
    top: none;
    width: none;
    z-index: none;  
 }

Is there a way to change the styles for a particular CSS class tag based on the route? I have seen examples using , but is there a way to do this with / ?

Monzoor Tamal · Accepted Answer · 2020-08-16 17:15:59Z

1

use it like this

<Component header />

// component

const Component = ({header}) => {

  const conditionalClass = header ? 'yesHeader' : 'noHeader';
  return (
   <p className={conditionalClass}>this is </p>
  )

}

you can use this as well

answered Aug 16, 2020 at 17:15

Monzoor Tamal

8106 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jon Over a year ago

Thanks - ClassNames helped.

Collectives™ on Stack Overflow

Conditionally Render CSS Based On Route (React)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related