Conditional rendering depending on URL

Question

I have a background video in my app, and it loads by default. But I want it not to load in specific pages. Here's my not working solution. It works only when I refresh my page and of course, it's not what I want

import React, { useEffect, useState } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import { routes } from './routes.js';


import './assets/css/style.css';

import Header from './components/global/Header';
import BgVideo from './components/global/BgVideo';
import Menu from './components/global/menu/Menu';

const App = () => {   
  
  return (
    <div className='app-wrapper'>    
        {window.location.pathname !== '/portfolio' && <BgVideo />}
        <Header /> 
        <Menu />
        <Switch>
          {
          routes.map(item =>  <Route key={item.id} path={item.pathname} exact component={item.component} />)
          }
          <Redirect to='/not-found' />
        </Switch>
    </div>
  );
};

export default App;

P.S.: I don't want to hide it with display:none, opacity:0, or something like that. Instead, I want it not to load at all.

Please, stop telling others you have excellent skills in ReactJS, this is basic knowledge and therefore I guess you just started with that. — Martin.
– Martin., Commented Apr 15, 2021 at 14:43
Martin, Thank you for your answer, but please, stop running over me, I don't even know where it's written about my excellent skills in everything. — broNalbandyan
– broNalbandyan, Commented Apr 16, 2021 at 6:44

Martin. · Accepted Answer · 2021-04-15 14:39:27Z

3

You have to use location from router instead. That's because React doesn't know that you changed something in the component and therefore doesn't even try to rerender it.

const App = (props) => {   
  
  return (
    <div className='app-wrapper'>    
        {props.location.pathname !== '/portfolio' && <BgVideo />}
        <Header /> 
        <Menu />
        <Switch>
          {
          routes.map(item =>  <Route key={item.id} path={item.pathname} exact component={item.component} />)
          }
          <Redirect to='/not-found' />
        </Switch>
    </div>
  );
};

export default withRouter(App);

answered Apr 15, 2021 at 14:39

Martin.

10.5k3 gold badges45 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

Conditional rendering depending on URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related