Ufdjrw

I'm having issues with figuring out React Router 4 routing for specific component. I have following project structure:

[dir] node_modules
[dir] public
[dir] src
 [dir] components
 [dir] Profile
 - Navigation.jsx
 - Card.jsx
 - Overview.jsx
 - About.jsx
 - Home.jsx
 - Login.jsx
 - Profile.jsx
 - App.jsx
 - index.js

Problem is, I want my Profile.jsx (located in src/components/Profile.jsx) to be my main point of entry and then I'd have another navigation that'd display two different sub-components named Overview and About. However what I want is for Profile.jsx to default Overview component when my visitor enters or navigates http://example.com/coolguy82 and then if the visitor clicks on About, it'd take him to http://example.com/coolguy82/about (but now without rendering Overview component).

So basically what I want is to get the same UI configuration when I visit http://example.com/coolguy82 and http://example.com/coolguy82/overview, but different when I go to http://example.com/coolguy82/about. I did make that happen, however when I navigate to http://example.com/coolguy82 (through browser address bar), my Profile.jsx only renders my Card and Navigation component (which is what I want) but won't render Overview component. Only when I click on navigation to go to Overview it renders that part of the page.

My code is as follows (some unneeded code omitted):

App.js

import React, Component from "react";
import 
 BrowserRouter as Router,
 Switch,
 Route,
 Link,
 Redirect
 from "react-router-dom";

import Home from "./components/Home.jsx";
import Login from "./components/Login.jsx";
import Profile from "./components/Profile.jsx";

class App extends Component 
 render() 
 return (
 <React.Fragment>
 <Router>
 <div>
 <header>
 <nav className="main">
 <ul>
 <li>
 <Link to="/">Home</Link>
 </li>
 <li>
 <Link to="/login">Login</Link>
 </li>
 </ul>
 </nav>
 </header>
 <Switch>
 <Route path="/" exact component=Home />
 <Route exact path="/login" component=Login />
 <Route
 path="/:username"
 render=props => <Profile ...props />
 />
 </Switch>
 </div>
 </Router>
 </React.Fragment>
 );
 


export default App;

Navigation.jsx

import React, Component from "react";
import Link from "react-router-dom";

class Navigation extends Component 
 constructor(props) 
 super(props);
 this.state = 
 user: this.props.user,
 tab: this.props.active
 ;
 
 render() 
 let user, tab = this.state;
 return (
 <React.Fragment>
 <ul className="nav nav-tabs">
 <li className="nav-item">
 <Link
 to=`/$user/overview`
 className="nav-link " + (tab === "overview" ? "active" : "")
 onClick=() => this.setState( tab: "overview" )
 >
 Overview
 </Link>
 </li>
 <li className="nav-item">
 <Link
 to=`/$user/about`
 className="nav-link " + (tab === "about" ? "active" : "")
 onClick=() => this.setState( tab: "about" )
 >
 About
 </Link>
 </li>
 </ul>
 </React.Fragment>
 );
 


export default Navigation;

Profile.jsx

import React, Component from "react";
import 
 BrowserRouter as Router,
 Switch,
 Route,
 Link,
 Redirect
 from "react-router-dom";

import Overview from "./Profile/Overview";
import About from "./Profile/About";
import Card from "./Profile/Card";
import Navigation from "./Profile/Navigation";

class Profile extends Component 
 constructor(props) 
 super(props);
 this.state = 
 user: this.props.match.params.username
 ;
 

 render() 
 let user = this.state.user;
 return (
 <React.Fragment>
 <Card user=this.state.user />
 <Navigation user=this.state.user active="overview" />
 <Route
 path="/:username/overview"
 exact=true
 render=props => <Overview ...props />
 />
 <Route
 path="/:username/about"
 exact=true
 render=props => <About ...props />
 />
 </React.Fragment>
 );
 


export default Profile;

What am I doing wrong and how can I correct it? I'm assuming I have misconfigured code for react router.