如何从props React Router动态获取所有路径

Question

该应用无法切换和呈现所有路线。它仅获得一个路径（firstOne）并进行渲染。

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import { connect } from "react-redux";

class Board extends Component {
  state = {
    routes: []
  };

  showRoutes = routes =>
    routes.length > 0 &&
    routes.map((route, i) => (
      <Route key={i} path={route.path} component={()=>"path"+i} />
    ));

  render() {
    const { routes } = this.props;
    return (
      <div>
        <Switch>
          <Route exact path="/" render={() => "start page"} />

          {this.showRoutes(routes.routesApi)}

          <Route path="/" render={() => "no such routes"} />
        </Switch>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  routes: state.routes
});

export default connect(mapStateToProps)(Board);

我也将componentWillReceiveProps()用作：

  componentWillReceiveProps(NextProps) {
    this.setState({ routes: NextProps.routes });
  }

并切换为从状态读取数据，但结果相同。

您能帮我了解什么地方出问题吗？