Как динамически получить все пути от реквизита 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 });
  }

и переключаюсь на чтение данных из состояния, но результатэто то же самое.

Не могли бы вы помочь мне, пожалуйста, чтобы понять, что не так?