例如，我有<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
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。
但是，如果信息和注释是将被某个字符串替换的变量，那么问题出在最后两个路由器，它们是相同的。即使人类必须做出决定，例如/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} />
您的网址将如下所示：
/songs/123/cool_song/i/great-song // info
/songs/123/cool_song/c/great-song // comment
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句