Вложенные маршруты маршрутизатора React?

Итак, у меня есть приложение React, в котором есть основные маршруты

/
/projects
/gallery
/about

Я хочу иметь вложенный маршрут, который выглядит как

/projects/skout

Я не уверен, почему, но этот маршрут не отображает правильный HTML из соответствующего файла компонента. Это просто пусто.

Компонент приложения

class App extends Component {

  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  render() {

    let routes = (
      <Switch>
        <Route exact path = "/projects/skout" Component = {Skout} />
        <Route exact path = "/about" component = {About} />
        <Route exact path = "/projects" component = {Projects} />
        <Route exact path = "/gallery" component = {Gallery} />
        <Route exact path = "/" component = {Home} />
        <Redirect exact to = "/" />
      </Switch>
    )

    return (
      <BrowserRouter>
        <div className = "App" styleName = "main-wrapper">
          <Layout>
              {routes}
          </Layout>
        </div>
      </BrowserRouter>

    );
  }
}

export default CSSModules(App, styles);

Компонент Skout

import React from 'react';

const skout = (props) => (
    <div>
        <span className = "container">
            <div className = "row">
                <h1>
                    Gallery
                </h1>
            </div>
            <span className = "container">
                <p>
                    Storage for Photos, Ideas, and Thoughts
                </p>
            </span>
        </span>
    </div>
)

export default skout;

Должен ли я проложить маршрут внутри компонента /projects?