Javascript 如何使用React Router v4（侧栏）创建多条路由？

我有板球队的JSON数据。板球应用程序基本上是CRUD web应用程序，我们可以在其中创建新团队或删除现有团队。我想

map

每个

侧边栏路线

检查一下，例如：如果我点击一个特定的团队，就会显示每个团队的数据

我已经阅读了react router文档，但是路线是硬编码的，但是如果我在侧栏中有板球队的动态列表，我如何在单击特定队时显示特定队的数据（参见屏幕截图）

单据中的路径为：

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>
  }
];

const路由=[
{
路径：“/”，
确切地说：是的，
侧边栏：（）=>主页！，
main:（）=>主页
},
{
路径：“/bubblegum”，
边栏：（）=>泡泡糖！，
main:（）=>泡泡糖
},
{
路径：“/鞋带”，
侧边栏：（）=>鞋带！，
主打：（）=>鞋带
}
];

截图：

---

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

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

要使道具与之匹配，您必须使用路由器

您可以按如下方式使用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作为组件中的道具提供给您。
您不需要为所有侧边栏国家/地区提供路线。如果我理解正确，那么你只需要一条路线就可以到达所有国家。您使用类似/countries/：countryId的路径进行路由，然后根据匹配情况决定要显示的数据。可能已经有答案了。你是指另一个文档中显示的带有id、名称等的动态路由吗。它由分号表示法实现，如：
。如果您需要澄清另一点，请将其添加到您的问题中。@OdifYltsaeb确定，因此如果
countryID
匹配，则应显示该国家，但我无法获取有关url匹配的文档。你能分享一下吗。@stonerock看到了吗：。这里有：id示例，您可以看到它是如何使用此匹配的。viewReact路由器v4中的params.id涵盖了大多数用例。只需给出项目id并将路径字符串与id连接起来。React Router文档中有匹配对象用例的示例。如果需要，您甚至可以通过查询字符串发送对象，但这需要更多的自定义。我知道使用react router
params
我们可以只渲染单个组件，但我只想问
this.props.match.params.id
匹配时，它应该渲染特定
id
的板球匹配详细信息，那么我的不同板球队详细信息的组件更改。感谢更新您的答案，但可以用更简单的方式完成，而无需使用redux。
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));