How to solve this React js problem?

Question

React

I have a stories component and there are buttons on several pages that should link to that component. The problem is that app js has a header and footer and they should not be there. How to solve this problem?

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { Header } from "./components/Header";
import { Home } from "./pages/home/Home";
// import logo from "./logo.svg";

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Header />
        <Switch>
          <Route path="/" component={Home} exact />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;

Answer 1

Display the header conditionally, depending on the location, if the address changes before opening your component, or create a variable in the state or in the store, which should be changed before going to the stories component.