How can I navigate to one component and open it as a whole page

Question

When I click on "blog" I would like to open only blog section on the whole page, not the extra blog component together with other components on main page. When I click now on Blog, it opens after team component on the same page. How can I change it and open as a whole page?

import React from 'react';
import './App.css';
import { BrowserRouter, Route} from "react-router-dom";
import Header from './components/Header';
import Home from './components/Home';
import About from './components/About';
import Team from './components/Team';
import Blog from './components/Blog';
import Contact from './components/Contact';
import ScrollToTop from './components/ScrollToTop';

const App = () => {
  return (
      <BrowserRouter>
      <Header />
      <Home />
      <About />
      <Team />
      <Route path="/blog" component={Blog}></Route>
      <Contact />
      <ScrollToTop />
      </BrowserRouter>
  );
}

export default App;

This is my another component:

import React from 'react';
import { Link as Link1} from 'react-scroll';
import { Link as Link2 } from 'react-router-dom';
import styled from 'styled-components';

const LeftNav = ({ open }) => {
    return (
        <NavMenu open={open}>
        <ul>
            <li>
                <Link1
                smooth={true}
                spy={true}
                offset={0}
                duration={1000}
                to="home"
                >Home</Link1>
            </li>
            <li>
                <Link1
                activeClass="active"
                smooth={true}
                spy={true}
                offset={0}
                duration={1200}
                to="about"
                >About</Link1>
            </li>
            <li>
                <Link1
                activeClass="active"
                smooth={true}
                spy={true}
                offset={0}
                duration={1200}
                to="team"
                >Team</Link1>
            </li>
            <li>
                <Link2 id="blog"
                to="/blog"
                target="_blank"
                >Blog</Link2>
            </li>
            <li>
                <Link1
                activeClass="active"
                smooth={true}
                spy={true}
                offset={0}
                duration={1200}
                to="contact"
                >Contact</Link1>
            </li>
        </ul>
    </NavMenu>
    )
}

export default LeftNav
````

Answer 1

You are always rendering the Header, Home, About, etc because they are not inside of a <Route/> component under <BrowserRouter/>. As in the your Blog component is being rendered only when you are on the /blog route, but the rest of your components are always being shown since there is no <Route/> wrapping them. You should put your main page in one route and your blog page under another, for example:

const App = () => {
  return (
      <BrowserRouter>
        <Route path="/home"> {/* <-- insert the right path for your main page here*/}
          <Header />
          <Home />
          <About />
          <Team />
          <Contact />
          <ScrollToTop />
        </Route>
        <Route path="/blog" component={Blog}></Route>
      </BrowserRouter>
  );
}

In the example above you should see the main page only when you go to {base_url}/home, so you will have to configure it to your needs if you need something different. Take a look at the Route documentation on its path prop to properly set it up.