How to use react router - reactjs

Question

I am building an application that has different pages and I was wondering how I would be able to restructure my routess i want to load login component on '/' and i have this.props.history.push("/homepage") on login page which open up the homepage on successful login i have a navbar in the homepage with different links would i address loading the components in the homepage when links are clicked and i want the navbar to stay only in the homepage and load component next to it.I am new to react.Whats the best solution to this kind of scenario.
navbar code
import React, { Component } from "react";
import jwt_decode from "jwt-decode";
import { Link, withRouter } from "react-router-dom";
class Navbar extends Component {
logOut(event) {
event.preventDefault();
localStorage.removeItem("usertoken");
this.props.history.push("/login");
}
render() {
return (
<ul style={navBarStyle} id="sidenav-1" className="sidenav sidenav-fixed">
<li>
<h1 className="center-align" style={{ fontSize: "30px" }}>
Hello
</h1>
</li>
<li>
<Link to="/profile">
<i style={linkStyle} className="material-icons ">
person
</i>
</Link>
</li>
<li>
<a href="https://twitter.com/MaterializeCSS" target="_blank">
<i style={linkStyle} className="material-icons ">
book
</i>
</a>
</li>
<li>
<Link to="/searchcourse">
<i style={linkStyle} className="material-icons">
search
</i>
</Link>
</li>
<li style={linkStyle}>
<a href="" onClick={this.logOut.bind(this)}>
<i style={linkStyles} className="fas fa-sign-out-alt" />
</a>
</li>
</ul>
);
}
}
homepage
class Homepage extends Component {
componentDidMount() {
document.title = "Dashboard";
}
render() {
return (
<div>
<Navbar />
<div className="container">
<div>
<h3>Dashboard</h3>
<hr />
</div>
<div className="col" />
</div>
</div>
);
}
}
this is my app.js
<BrowserRouter>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/homepage" component={Homepage} />
<Route exact path="/profile" component={Profile} />
<Route exact path="/searchcourse" component={SearchHelper} />
<Route exact path="/item" component={CourseItem} />
</BrowserRouter>

Answer 1

You can use nested routes. Keep Homepage specific sub-routes inside Homepage component. That way route /homepage will open up Homepage Component.
Inside Homepage you can have Navbar and the child routes of homepage like :
/homepage/profile, /homepage/item etc.
Here is one article to dig deep: https://medium.com/#marxlow/simple-nested-routes-with-layouts-in-react-router-v4-59b8b63a1184