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

Question

Итак, у меня есть приложение 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?

Answer 1

Необходимо отобразить соответствующий компонент маршрута внутри Layout, поскольку они являются вложенными маршрутами:

  export const Layout = ({ children }) => (
     <React.Fragment>
            {children}
     </React.Fragment>
   )

Но в реагирующем маршрутизаторе v4 вложенные маршруты должны отображаться отдельно. Вам нужно поместить маршруты внутри компонентов Layout.