使用反应路由器从主页重定向到特定页面后访问从 NavLink 传递的数据

Posted 2023-02-22

【中文标题】使用反应路由器从主页重定向到特定页面后访问从 NavLink 传递的数据

【英文标题】：Accessing data passed from NavLink after redirecting from home page to a specific page using react router

【发布时间】：2020-11-11 01:28:20

【问题描述】：

我正在开发一个反应网络应用程序，我正在使用反应路由器。我想将数据从NavLink 传递给我的Movies 组件。 NavLink 如下所示。

<ul>
   <li id="movies">
       <NavLink exact to = pathname: "/", state:page: 1  > Movies </NavLink>
   </li>
</ul>

在我的路由器中，我想从登录页面重定向到movies/all/1。我的路线是：

 <Route exact path="/" render=() => <Redirect to="/movies/all/1" /> />
 <Route exact path = "/movies/:genre/:genrePage" component = Movies />

在Movies 组件中，我可以访问路由参数，但我无法访问从NavLink 通过location 道具传递的数据page: 1。我不断得到undefined作为props.location.state的值。我该怎么做？我不希望我传递的数据在url 中。

编辑

也许要澄清一下。下面的问题部分回答了我的问题。

ReactJS - Pass props with Redirect component

但是，当页面首次加载然后从根路径/ 重定向到/movies/all/1 时，我仍然无法访问从Link 传递的数据。只有在点击Link 后才能访问。

【问题讨论】：

这能回答你的问题吗？ ReactJS - Pass props with Redirect component

可能重复：***.com/questions/52064303/…

检查我上面所做的编辑

【参考方案1】：

Redirect 组件不会将location.state 传递到下一个路由（即/movies/all/1）。

如果你想这样做，你需要从你的路由/ 中获取location.state 并将其传递给Redirect。

看起来像这样：

<Route exact path="/" render=( location ) => <Redirect to= pathname: "/movies/all/1", state: location.state  /> />

【讨论】：

它可以工作，但只有在链接被点击之后。我希望在页面加载时立即传递数据。如果访问者到达该站点，他/她将从/ 页面重定向到movies/all/1。即state 的值为undefined。如果先点击NavLink，则数据顺利通过。

我认为您无法在页面加载时定义历史状态。您可以在 Movies 组件中执行此操作，无论您在何处访问 page 值，都需要执行类似 const page = location.state?.page || 1; 的操作，因此当 undefined 时默认为 1

这是我已经解决的问题。非常感谢。