如何在 React 中有条件地路由组件？

Question

在我的一个 React 项目中，我必须路由到特定组件，但是它具有相同的链接和不同的参数。 通过代码 Go 清楚起见。

主页.js

{/* It links to Video Component */}
<div>
<Link exact to={{ pathname: `/contents/lists/${videoId}`}} />
<span>
...video section code
<span>
</div>

{/* It links to Photo Component */}
<div>
<Link exact to={{ pathname: `/contents/lists/${photoId}`}} />
<span>
...photo section code
<span>
</div>

JSON 数据为

const data = {
  contents: {
    lists: {
      id: 5abcd,
      photo: {
        cover: "url"
      }
    },
    lists: {
      id: 5xyz,
      video: {
        cover: "url"
      }
    },
  }
}

应用程序.js

<Route exact path="/contents/lists/:photoId" component={PhotosComp} />
<Route exact path="/contents/lists/:videoId" component={VideosComp} />

在这里，PhotosComp 正确提取了参数 id，但是对于 PhotosComp 的 VideosComp 参数 id 被提取并给出错误，它没有链接到 VideosComp。 什么可能是合适的解决方案？

const item Data = [
{
text: Photo,
link: `/contents/lists/:photoId`
},{
text: Video,
link: `/contents/lists/:videoId`
},

Answer 1

您可以简单地选择不同的路线：

<Route exact path="/contents/photos/:photoId" component={PhotosComp} />
<Route exact path="/contents/videos/:videoId" component={VideosComp} />

并更新您的链接：

<Link exact to={{ pathname: `/contents/videos/${videoId}`}} />
<Link exact to={{ pathname: `/contents/photos/${photoId}`}} />

在您当前的代码中，没有人可以理解/contents/lists/123456应该指向视频组件还是照片组件。

或者，如果您出于某种原因必须使用相同的 Route，那么您可以在组件中使用某些条件：

<Route exact path="/contents/lists/:Id" component={MediaComp} />

在 MediaComp 中：

function MediaComp() {
    const id = ..... // todo
    if (some condition for video) 
      return <VideoComp/>
    else return <PhotoComp/>
}

此外，您可以使用一些 state 数据创建链接：

<Link exact to={{ pathname: `/contents/lists/${id}`, state: { type: 'photo' }}} />

在 MediaComp 中：

const type = history.location.state.type
if (type === 'photo) return <PhotoComp/> 
else..