remove the navbar and style in my new page redirect. React js Route-CodePudding

I try at the click of a button to have a redirect to my game-asteroids page. The problem is that with my current structure I have my navbar and my footer as well as the style which are added on my new page how could I do to have a redirect on a blank add-in page? I share with you my App.js page where I have my routes.

import './style.css';
import './App.css';

const App = () => {
  return (
    <Router>
      <Preloader load={load} />

      <div className="App" id={load ? 'no-scroll' : 'scroll'}>
        <Navbar />
        <ScrollToTop />
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/resume" component={Resume} />
          <Route path="/game" component={Games} />
          <Route path="/game-asteroids" component={GameAsteroids} />
        </Switch>
        <Footer />
      </div>
    </Router>
  );
};

export default App;

CodePudding user response：

So, the App() will always render the Navbar no matter where or how it's rendered. You would need to do something like:

import { useLocation } from 'react-router-dom'
const App = () => {
  const location = useLocation()
  const atGame = location.pathname.includes('game-asteroids')
  return (
    <div className="App" id={load ? "no-scroll" : "scroll"}>
    {!atGame && <Navbar />}
    <ScrollToTop />
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/resume" component={Resume} />
      <Route path="/game" component={Games} />
      <Route path="/game-asteroids" component={GameAsteroids} />
    </Switch>
    {!atGame && <Footer />}
  </div>    
</Router>
  )
}

I think that's what you're asking. If not, it should be close enough to get you what you want.

CodePudding user response：

If you want to remove footer only from a specific route, you can use location.pathname. It returns the current url path name. And then you can set a condition as below:

{location.pathname !== '/game-asteroids' && <Footer />}

Try below code :

    <Navbar />
    <ScrollToTop />
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/resume" component={Resume} />
      <Route path="/game" component={Games} />
      <Route path="/game-asteroids" component={GameAsteroids} />
    </Switch>    
   {location.pathname !== '/game-asteroids' && <Footer />}