在 React Router 中，我如何使用不同的参数路由到 2 个相似的 url

Question

例如，我有一个播放歌曲的 <Song /> 路由，我想要另一个路由 <SongInfo /> 显示歌曲信息，另一个 <SongComments /> 显示评论。

<Route path="songs" component={Songs} />
<Route path="song/:id/:name" component={Song} />
<Route path="songs/:id/:name/:info" component={SongInfo} />
<Route path="songs/:id/:name/:comments" component={SongComments} />

我希望 url 结构如下所示：

/songs/123/cool_song/
/songs/123/cool_song/info
/songs/123/cool_song/comments

如何实现？由于目前最后 2 条路线相同并转到相同的组件。

我正在使用 react-router: 1.0.0

Answer 1

info和comments是静态词还是变量？我问是因为在路由中你将它们用作变量但在示例中你将它们用作静态词。如果它们永远不会改变，那么您的路线应该如下所示：

<Route path="songs" component={Songs} />
<Route path="song/:id/:name" component={Song} />
<Route path="songs/:id/:name/info" component={SongInfo} />
<Route path="songs/:id/:name/comments" component={SongComments} />

（我删除了信息和评论之前的冒号）。现在如果你有 url /songs/123/cool_song/info 它将运行 SongInfo 组件。如果你有 url /songs/123/cool_song/comments 它将运行 SongComments.

但是如果 info 和 comments 是将被某个字符串替换的变量，那么问题出在最后两个路由器上，它们是相同的。即使人类必须做出决定，例如/songs/123/cool_song/great-song, great-song 是评论还是信息？你必须让他们与众不同。例如：

<Route path="songs" component={Songs} />
<Route path="song/:id/:name" component={Song} />
<Route path="songs/:id/:name/i/:info" component={SongInfo} />
<Route path="songs/:id/:name/c/:comments" component={SongComments} />

您的 url 将看起来：

/songs/123/cool_song/i/great-song // info
/songs/123/cool_song/c/great-song // comment

在 React Router 中，我如何使用不同的参数路由到 2 个相似的 url

In React Router how can I route to 2 similar urls with a different param

javascript

reactjs

react-router