如何从路由器动态获取所有路径

应用程序无法切换和渲染所有路由。它只获取一条路径(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 });
  }

并切换到从状态读取数据,但结果是相同的。

你能帮我弄明白怎么了吗?