Question

我有这样的路线：

<Route path="lookbook" component={Lookbook} onEnter={onPageEnter}>
  <Route path=":photoIdentifier" component={PhotoDetailsModal} onEnter={onPageEnter}/>
</Route>

这样可以实现如下路径： myapp.com/lookbook/45

如果：photoIdentifier＆＃39; 45＆＃39;是一张照片的ID，用于收集相应照片的数据，是否有方法可以将标题字符串附加到网址的末尾而无需重新路由或影响应用？

所以基本上路径看起来像 myapp.com/lookbook/45/cool-photo-title

当然我会设置一条路径来容纳这条新路径，但就内部导航而言，我只想保留照片ID以在我的链接组件中创建路径，并在事后添加标题更加英语友好的可共享URL。

Answer 1

您可以尝试使用可选参数，我认为它可以满足您的要求。试试这个：

<Route path=":photoIdentifier(/:photoTitle)" component={PhotoDetailsModal} onEnter={onPageEnter}/>

现在这个photoTitle是一个可选的参数，当你想要显示标题时使用它，否则你也可以忽略它。

您可以同时使用以下链接：

{{pathname: "/lookbook/"+data.id+"/"+photoTitle}}

或

{{pathname: "/lookbook/"+data.id}}

它将打开相同的页面，photoTitle将出现在网址中。

您也可以使用查询，而不会影响原始路线，如下所示：

{{pathname: "/lookbook/"+data.id+"/"+"title="+photoTitle}}

react-router：在地址栏的末尾附加一个字符串而不影响应用程序或路由器？

1 个答案: