React Router 4, суб-маршрутизация для конкретного компонента

Question

У меня проблемы с определением маршрутизации React Router 4 для конкретного компонента.У меня следующая структура проекта:

[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

Проблема в том, что я хочу, чтобы мой Profile.jsx (расположенный в src/components/Profile.jsx) был моей основной точкой входа, а затем у меня была бы другая навигация, которая отображала быдва разных подкомпонента с именами Overview и About.Однако я хочу, чтобы компонент Profile.jsx по умолчанию составлял Overview, когда мой посетитель входит или перемещается по http://example.com/coolguy82, а затем, если посетитель нажимает кнопку О программе, он переводит его на http://example.com/coolguy82/about (но теперь без рендеринга Overviewcomponent).

Поэтому в основном я хочу получить ту же конфигурацию пользовательского интерфейса при посещении http://example.com/coolguy82 и http://example.com/coolguy82/overview, но другую, когда я перехожу к http://example.com/coolguy82/about.Я сделал это, однако, когда я перехожу на http://example.com/coolguy82 (через адресную строку браузера), мой Profile.jsx отображает только мои компоненты Card и Navigation (что я и хочу), но не отображает Overview составная часть.Только когда я нажимаю на навигацию, чтобы перейти к обзору, она отображает эту часть страницы.

Мой код выглядит следующим образом (некоторые ненужные коды опущены):

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;

Что я делаюнеправильно и как я могу это исправить?Я предполагаю, что у меня неправильно настроен код для реагирующего маршрутизатора.