如何根据id路由到特定页面?

Question

在我的一个React项目中，我有两个组件PhotoComp和VideoComp。我基于以下API调用这两个组件->VideoComp/content/list/abc123ghi, PhotoComp/content/list/pqr456yui。现在我在App.js中的路由如下

<Route path="/content/list/:videoId" component={VideoComp} />
<Route path="/content/list/:photoId" component={PhotoComp} />

现在在视频和照片组件中，我使用useParams()提取参数，然后期望它基于参数进行路由。当我点击主页上的视频部分时，它会重定向到VideoComp，完美地显示视频id 'abc123ghi'上面的URL，而当点击照片部分时，它不会重定向到PhotoComp，它移动到VideoComp，但是，上面显示的URL是照片id 'pqr456yui'。

合适的解决方案是什么?

Answer 1

如果它们在一个开关中，这是因为你的两个路由完全相同/content/list/pqr456yui可以同时引用视频和照片。唯一的区别是用于获取id的useParams的属性。使用const {videoId} = useParams() vs const {photoId} = useParams()。你需要一些方法来区分它们。例如，更改url路径

<Switch>
<Route path="/videos/list/:videoId" component={VideoComp} />
<Route path="/photos/list/:photoId" component={PhotoComp} />
</Switch>

Answer 2

React Router实际上并不知道你是在传递一个videoId还是photoId作为你的参数。它尝试匹配URL并返回它找到的第一个匹配项，即VideoComp。

你需要一些方法来区分你的视频和照片id。我建议的一件事是将VideoComp和PhotoComp包装在另一个组件中，并在该组件中有条件地渲染。

下面是一个例子:

<Route path="/content/list/:videoId" component={PhotoVideoComp} />

PhotoVideoComp看起来像这样:

function PhotoVideoComp(){
return(
props.match.params.videoId === 'video' ? VideoComp:PhotoComp
)

}
export default PhotoVideoComp