如何在不添加反应的网址的情况下导航到特定路线

Question

我正在使用react-router，我有一些嵌套的路由，如"/stories"和"/stories/:storyId"，现在我的问题是我有一个组件是一个故事，并使用这个特定的storyId导航到路由"/stories/:storyId"单击它以查看该故事的详细信息。问题是这个单个组件可以在另一个路由中呈现，如"/bookmarks"，如果我使用钩子useNavigate并将它传递给storyId，当我单击它导航到"/bookmarks/:storyId"的组件时，我希望它去到"/stories/:storyId"

Answer 1

在不同子路由上渲染的组件应该使用绝对链接路径而不是相对路径。相对路径和绝对路径之间的区别在于前导 "/" 字符。以 "/" 开头的路径是从托管应用程序的根目录开始的绝对路径，否则路径将被视为与当前匹配路径的相对路径。

例如，而不是

<Link to={`../${storyId}`}>{storyId}</Link>

... or ...

<Link to={`${storyId}`}>{storyId}</Link>

... or ...

navigate(`../${storyId}`);

... or ...

navigate(`${storyId}`);

它仅相对于当前路径的兄弟或子路径链接，使用绝对路径

<Link to={`/stories/${storyId}`}>{storyId}</Link>

... or ...

navigate(`/stories/${storyId}`);