title: Disappearing of components while using react-router in React
body: <p>so,I have been building a React application and I have been facing the similar problem of disappearing of component on refresh,more precisely its something with react router,I must be using it incorrectly</p>
  
  <p>App.js look like</p>
  
  <pre><code>import React from "react";
  import "./App.css";
  import { Home } from "./components/home";
  
  function App() {
   return &lt;Home /&gt;;
  }
  
  export default App
  </code></pre>
  
  <p>Home Component</p>
  
  <pre><code>export class Home extends Component {
  render() {
    return (
      &lt;BrowserRouter&gt;
        &lt;NavigationBar /&gt;
        &lt;Switch&gt;
          &lt;Route path="/jobPortal" component={JobPortal} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    );
  }
  </code></pre>
  
  <p>Common Navbar</p>
  
  <pre><code>const NavigationBar = ({ userType }) =&gt; {
    return (
      &lt;Navbar style={globalStyles.container} bg="dark" variant="dark"&gt;
        &lt;Navbar.Brand style={globalStyles.container} href="/"&gt;
          Soffice
        &lt;/Navbar.Brand&gt;
        &lt;Nav className="ml-auto"&gt;
          &lt;Nav.Link as={NavLink} to="/JobPortal"&gt;
            Job Portal
          &lt;/Nav.Link&gt;
          {userType &amp;&amp; (
            &lt;Nav.Link as={NavLink} to="/logout"&gt;
              Log Out
            &lt;/Nav.Link&gt;
          )}
  
          {!userType &amp;&amp; (
            &lt;React.Fragment&gt;
              &lt;Nav.Link as={NavLink} to="/SignUp"&gt;
                Sign Up
              &lt;/Nav.Link&gt;
              &lt;Nav.Link as={NavLink} to="/SignIn"&gt;
                Sign In
              &lt;/Nav.Link&gt;
            &lt;/React.Fragment&gt;
          )}
        &lt;/Nav&gt;
      &lt;/Navbar&gt;
    );
  };
  </code></pre>
  
  <p>export default NavigationBar;</p>
  
  <p>Job Navbar which appears when we access jobPortal</p>
  
  <pre><code>const NavigationBar = ({ url }) =&gt; {
    // let {url,url} =useRouteMatch();
    console.log(url);
    return (
      &lt;Navbar style={{ ...globalStyles.container }} bg="info" variant="dark"&gt;
        &lt;Nav className="mx-auto"&gt;
          &lt;Nav.Link style={styles.navBarColor} as={NavLink} to="/JobPortal"&gt;
            Home
          &lt;/Nav.Link&gt;
          &lt;Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Post`}&gt;
            Post Job
          &lt;/Nav.Link&gt;
          &lt;Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Want`}&gt;
            Want Job
          &lt;/Nav.Link&gt;
          &lt;Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Contact`}&gt;
            Contact
          &lt;/Nav.Link&gt;
        &lt;/Nav&gt;
      &lt;/Navbar&gt;
    );
  };
  const styles = {
    navBarColor: {
      color: "white",
      fontSize: 22
    }
  };
  export default NavigationBar;
  </code></pre>
  
  <p>JobPortal component</p>
  
  <pre><code>export class JobPortal extends Component {
    componentDidMount() {
      console.log("path", this.props.match.url);
    }
    render() {
      const path = this.props.match.path;
  
      return (
        &lt;BrowserRouter&gt;
          &lt;NavigationBar url={this.props.match.url} /&gt;
          &lt;Switch&gt;
            &lt;Route path={`${path}/Want`} component={Want} /&gt;
          &lt;/Switch&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  
  <p>Want component</p>
  
  <pre><code>class Want extends Component {
    constructor(props) {
      super(props);
      this.state = {
        name: "",
        email: "",
        message: "",
        jobs: [
          {
            jobId: 1,
            jobTitle: "software"
          }
        ]
      };
    }
  
    handleClick() {
      console.log(this.state);
    }
    componentWillMount() {
      this.url = this.props.location.pathname;
      console.log("location", this.props.location.pathname);
    }
    render() {
      const styles = {
        card: {
          width: "14em",
          height: "100%",
          fontSize: 20,
          padding: 10
        }
      };
      return (
        &lt;BrowserRouter&gt;
          &lt;Route path={`${this.url}/:jobId`} component={Job} /&gt;
          &lt;Container&gt;
            &lt;Container&gt;&lt;/Container&gt;
            &lt;Container&gt;
              &lt;Row&gt;
                {this.state.jobs.map((job, index) =&gt; (
                  &lt;Col style={{ padding: 20 }}&gt;
                    &lt;Card text="white" bg="dark" style={styles.card}&gt;
                      &lt;Card.Body&gt;
                        &lt;Card.Title&gt;
                          &lt;Link to={`${this.url}/${job.jobId}`}&gt;
                            {job.jobTitle}
                          &lt;/Link&gt;
                        &lt;/Card.Title&gt;
                      &lt;/Card.Body&gt;
                    &lt;/Card&gt;
                  &lt;/Col&gt;
                ))}
              &lt;/Row&gt;
            &lt;/Container&gt;
          &lt;/Container&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default Want;
  </code></pre>
  
  <p>Job component which is disappearing</p>
  
  <pre><code>export class Job extends Component {
    render() {
      return &lt;p&gt;this will disappear&lt;/p&gt;;
    }
  }
  </code></pre>
  
  <p><strong>complete code sandbox link</strong></p>
  
  <blockquote>
    <p><a href="https://codesandbox.io/s/mystifying-yalow-6jcyn?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/mystifying-yalow-6jcyn?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a></p>
  </blockquote>
  
  <p>when I click on <strong>software link</strong> the card should disappear but it is not <a href="https://i.stack.imgur.com/ArGPg.png" rel="nofollow noreferrer">image</a>
  but so far the job component is appearing and working fine
  but when I refresh the page, <strong>job</strong> component disappears and on clicking <strong>software link</strong>
  its extending the url in a weird way.
  <a href="https://i.stack.imgur.com/LVwRb.png" rel="nofollow noreferrer">component disappers</a></p>