如何使用React Router v4（补充工具栏）创建多个路由？

Question

我有JSON data板球队。板球应用程序基本上是CRUD Web应用程序，我们可以在其中创建新团队或删除现有团队。我想map每个sidebar routes检查一下这个例子：https://reacttraining.com/react-router/web/example/sidebar并显示每个团队的数据，如果我点击特定团队。

我已经浏览了路由器文档，但是路由是硬编码的，但如果我在侧边栏中有动态的板球队列表，我如何在特定团队中显示特定团队的数据（见截图）。

文档中的路由是：

const routes = [
  {
    path: "/",
    exact: true,
    sidebar: () => <div>home!</div>,
    main: () => <h2>Home</h2>
  },
  {
    path: "/bubblegum",
    sidebar: () => <div>bubblegum!</div>,
    main: () => <h2>Bubblegum</h2>
  },
  {
    path: "/shoelaces",
    sidebar: () => <div>shoelaces!</div>,
    main: () => <h2>Shoelaces</h2>
  }
];

截图：

Answer 1

在路线文件中，您可以指定如下路线：

<Route path="/teams/:teamId component={TeamDetails} />

然后在TeamDetails组件中，您可以访问teamId，如：

this.props.match.params.id

要在道具中匹配，您必须使用withRouter。

您可以按如下方式使用withRouter：

import { withRouter } from 'react-router';

class TeamDetails extends React.Component {
    .....
    .....
}

export default withRouter(TeamDetails);

OP评论的更新：

在TeamDetails组件中：

import { withRouter } from 'react-router';
import { connect } from 'react-redux';

class TeamDetails extends Component {
  componentWillMount() {
    this.props.getTeam(this.props.match.params.id)
  }

  render() {
    console.log(this.props.team);
    return (......);
  }
}

const mapStateToProps = state => ({
  teams: state.teams.team,
});

const mapDispatchToProps = dispatch => ({
  getTeams: teamId => dispatch(actions.getTeams(teamId)),
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(TeamDetails));

当您的TeamDetails组件加载时，您将调用一个名为getTeam的操作，该操作将调用api。在你的减速器中，你将设置一个称为团队的状态。该状态（团队）将通过connect helper作为组件中的prop使用。