React-Router v4嵌套路由不匹配

我是React Router的新手，正在努力了解为什么我的实现无法正常工作。在DevTools中，似乎创建了嵌套路线，但是当我单击应该加载它的链接时，整个页面将重新呈现为空白。我猜想链接的URL与路由的路径不匹配（尽管从屏幕截图中可以看到，它们是相同的），或者路由从未真正注册和测试过是否匹配？

Chrome开发工具中的React输出屏幕截图

我在ReportContainer组件的呈现器中放置了一个断点，但从未实现。

应用程式

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { connect } from 'react-redux'
import styles from './App.css'
import { logout } from '../actions/user'
import { userIsAuthenticatedRedir, userIsNotAuthenticatedRedir } from '../auth'

import ProtectedComponent from './App.jsx'
import LoginComponent from './Login.jsx'
import Home from './Home'

const Login = userIsNotAuthenticatedRedir(LoginComponent)
const Protected = userIsAuthenticatedRedir(ProtectedComponent)


function App({ user, logout }) {
  return (
    <Router>
      <div className={styles.wrapper}>
        <div className={styles.content}>
          <Route exact path="/" component={Home}/>
          <Route exact path="/login" component={Login}/>
          <Route exact path="/app" component={Protected}/>
        </div>
      </div>
    </Router>
  )
}

const mapStateToProps = state => ({
  user: state.user
})

export default connect(mapStateToProps, { logout })(App)

App.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux'

import mainLayout from '../layouts/main';
import Report from './Report.jsx';

const routes = [
  {
    label: 'Reports',
    subs: {
      links: [
        {
          label: 'Report 1',
          link: '/app/reports/report1',
        }
      ],
      paths: [
        {
          path: '/app/reports/report1',
          component: Report
        }
      ]
    }
  }
];

export class AppContainer extends Component {

  render() {

    return (
        React.createElement(mainLayout, { routes })
    );
  }
}
export default connect(null, null)(AppContainer)

主要布局

我在这里对Route进行了硬编码，而不是从一部分问题中动态构建它，以防出现问题。

import React from 'react'
import { Route } from 'react-router-dom';

import AppMenuBar from '../components/AppMenuBar';
import Report from '../components/Report.jsx';

const MainForm = ({ routes }) => (
  <div>
      <AppMenuBar screen="app/main" routes={routes} />
      <div style={{ marginLeft: '250px' }}>
        <h1>Main Page</h1>
        <p> Default page for the /app location.</p>

        <Route 
          path='/app/reports/report1'
          key='r1'
          component={Report}
        />
      </div>
  </div>
)

export default MainForm

我渲染的App组件的屏幕截图。这与React开发工具的输出相对应。单击“报告1”菜单项会产生此aka更新的url，但屏幕为空白。快速查看React输出显示根本没有渲染的组件，只有App.js的空路由。

嵌套路由在这种情况下是否应该工作，而我误会了它们应该如何工作？BrowserRouter是否不知道嵌套的路由，因此无法进行匹配，默认为null组件？我发现的示例都没有跨越多个文件的嵌套路由（尽管它们显然使用了多个组件）。想知道我的实现中是否缺少某些内容。

如果有我应该引用的这种模式的好例子，我将向正确的方向提供指导。谢谢！