反应路由器嵌套路由？

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);

滑板零件

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>
   )

但是在React Router v4中，嵌套路由需要单独渲染。 您需要在Layout组件中放置路由。