React 路由嵌套，报如下错误。求解答

Question

用React的routerConfig 做路由嵌套，点击进去报如下错误。
不知道是什么原因。是不是配置写错了？

import React, { Component } from 'react';
import logo from './logo.svg';
import big_hansom from './img/big-hansom.png';
import './App.css';
import Home from "./components/Home";
import About from "./components/About";
import WindWater from "./components/WindWater";
import EQSchool from "./components/EQSchool";
import LoveSchool from "./components/LoveSchool";
import Banner from './components/banner';
import BlindDate from './components/BlindDate';
import RedMothor from './components/RedMothor';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'
const routes = [
  {
    path:'/content',
    component:Content,
    routes:[
      {
        path:'/content/home',
        component:Home
      },
      { path: '/content/windwater',
        component: WindWater
      },
      { path: '/content/eqschool',
        component: EQSchool
      },
      { path: '/content/blinddate',
        component: BlindDate
      }
    ]
  },
  { path: '/about',
    component: About
  }
  
]

// wrap <Route> and use this everywhere instead, then when
// sub routes are added to any route it'll work
const RouteWithSubRoutes = (route) => (
  <Route path={route.path} render={props => (
    // pass the sub-routes down to keep nesting
    <route.component {...props} routes={route.routes}/>
  )}/>
)

class App extends Component {
  render() {
    return (
      <Router>
      <div className="App">
        <ul>
        <li><Link to="/content">首页</Link></li>
        <li><Link to="/about">关于我们</Link></li>
      </ul>
        {routes.map((route, i) => (
        <RouteWithSubRoutes key={i} {...route}/>
      ))}
      </div>
      </Router>
    );
  }
}

class Content extends Component{
  render({routes}){
    return(
      <div>
    <Banner/>
        <nav>
    <div className="width-base auto">
      <ul>
        <li><Link to="/content/home">首页</Link></li>
        <li><Link to="/content/home/blinddate">我要相亲</Link></li>
        <li><Link to="/content/home/redmothor">红娘专区</Link></li>
        <li><Link to="/content/home/loveschool">婚姻学校</Link></li>
        <li><Link to="/content/home/eqschool">情商学院</Link></li>
        <li><a href="#">心理咨询</a></li>
        <li><Link to="/content/home/windwater">周易风水</Link></li>
      </ul>
      <div className="big-hansom">
        <a href="#"><img src={big_hansom}/></a>
        <span>大俊</span>
      </div>
    </div>
  </nav>
  {routes.map((route, i) => (
        <RouteWithSubRoutes key={i} {...route}/>
      ))}
  </div>
    )
  }
}
export default App;

报错如下：

Answer 1

Content组件的render方法里面怎么有参数呢？要从this.props.routes获取。

Answer 2

谢谢啦！我是通过 this.props.match.params 获取的。代码如下：

<div>
                    <div className="subject-tit">
                       {this.props.match.params.message}
                        <a href="#">（查看原因）</a>
                    </div>
                    <div className="img-box"></div>
                    <input type="button" value="返回首页"/>
                </div>

不知道是不是版本的问题。