My home page is always rendering above every other page ,like when i am on signin my home page data is rendered first like 2 pages in single page

My App.js

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Route path="/">
        <Home />
      </Route>
      <Route path="/Signin">
        <Signin />
      </Route>
      <Route path="/Signup">
        <Signup />
      </Route>
      <Route path="/Profile">
        <Profile />
      </Route>
      <Route path="/create">
        <CreatePost />
      </Route>
    </BrowserRouter>
  );
}

export default App;

my navbar is containing links of all pages and is using react-router-dom but my home page is always rendering above every page , it is containing 4 other page links including home, i have just shown home and signup as error is same with other pages as well

My Navbar.js

import React from "react";
import PeopleIcon from "@material-ui/icons/People";
import IconButton from "@material-ui/core/IconButton";
import { Link } from "react-router-dom";

import "../ComponentsCss/Navbar.css";

function Navbar() {
  return (
    <div>
      <nav>
        <div className="nav-wrapper white">
          <Link to="/" className="brand-logo">
            Instagram
          </Link>
          <ul id="nav-mobile" className="right hide-on-med-and-down">
            <li>
              <Link to="/Signin">Signin</Link>
            </li>
            <li>
              <Link to="/Signup">Signup</Link>
            </li>
            <li>
              <Link to="/Profile">Profile</Link>
            </li>
            <li>
              <Link to="/create">create</Link>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  );
}

export default Navbar;

Home.js

import React from "react";

import "../../ComponentsCss/Home.css";
function Home() {
  return (
    <div className="home">
      <div className="card home-card">
        <h5>Ramesh</h5>
        <div className="card-image">
          <img src="https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" />
        </div>
        <div className="card-content">
          <i className="material-icons" style={{ color: "red" }}>
            favorite
          </i>
          <h6>TItle</h6>
          <p>this is amazing post</p>
          <input type="text" placeholder="add a comment" />
        </div>
      </div>
    </div>
  );
}

export default Home;

Signup.js

import React from "react";
import { Link } from "react-router-dom";

import "../../ComponentsCss/Login.css";

function Signup() {
  return (
    <div className="my-card">
      <div className="card auth-card input-field">
        <h2>Instagram</h2>
        <input type="text" placeholder="name" />
        <input type="email" placeholder="email" />
        <input type="password" placeholder="password" />
        <button
          className="btn waves-effect waves-light "
          type="submit"
          name="action"
        >
          Signup
        </button>
        <h5>
          <Link to="/signin">Already have account?</Link>
        </h5>
      </div>
    </div>
  );
}

export default Signup;

complete github code -: https://github.com/dhruv354/instagram-frontend.git

Answer

You need to make your Home route only match when is that exact route, change your App with this:

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Home from "./Components/screens/Home";
import Signup from "./Components/screens/Signup";
import Signin from "./Components/screens/Login";
import Profile from "./Components/screens/Profile";
import CreatePost from "./Components/screens/createPost";
import Navbar from "./Components/Navbar";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/Signin">
        <Signin />
      </Route>
      <Route path="/Signup">
        <Signup />
      </Route>
      <Route path="/Profile">
        <Profile />
      </Route>
      <Route path="/create">
        <CreatePost />
      </Route>
    </BrowserRouter>
  );
}

export default App;