导航离开然后返回页面时如何记住 React-Router URL 参数？

Posted 2023-03-16

【中文标题】导航离开然后返回页面时如何记住 React-Router URL 参数？

【英文标题】：How do I remember a React-Router URL parameter when navigating away and then back to a page?

【发布时间】：2018-10-07 17:48:49

【问题描述】：

问题：

我有一个使用 React-Router-DOM 进行哈希路由的 React 应用程序。该应用程序有一个带有Home 和About 的主导航栏。 Home 内容有一个带有A、B 和C 的子导航栏。

当导航到www.mysite.com/#/home/ 时，路由器默认（重定向）到www.mysite.com/#/home/A。

当通过Home 导航链接从/#/about 导航到/#/home 时，我希望路由器记住上次使用的子路由。目前，使用Home nav 链接导航到首页，返回到#/home/A

示例：

在浏览器中输入 URL www.mysite.com ==> 呈现/home/#/A 使用Home 下的子导航菜单选择B ===> 呈现/#/home/B 使用主导航菜单选择About ==> 呈现/#/about 使用主导航菜单选择Home ==> 呈现/#/home/B

结构

<App>
    <header>
        <NavLink to="/home">home</NavLink>
        <NavLink to="/contact">contact</NavLink>
    </header>

    <section>
        <Switch>
            <Redirect exact from="/" to="/home/A" />

            <Route path="/home">
                <div>
                    <sub-header>
                        <NavLink to="/home/A">A</NavLink>
                        <NavLink to="/home/B">B</NavLink>
                        <NavLink to="/home/C">C</NavLink>
                    </sub-header>

                    <div>
                        ... content for home
                        <Switch>
                            <Route path="/home/:id" component=ChildComponentThatUsesID>
                        </Switch>
                    </div>

                </div>
            </Route>

            <Route path="/about"> ... </Route>              

        </Switch>
    </section>
</App>

注意事项

我知道我需要更改重定向，这只是为了方便。我也知道我将不得不更改<NavLink to="/home"> 以某种方式合并使用子菜单链接之一时将设置的变量属性或状态，但我不知道该怎么做。

【参考方案1】：

使用 react-router 的内部状态。

const location = 
  pathname: '/somewhere',
  state:  fromDashboard: true 


<Redirect to=location/>

您可以稍后通过this.props.location.state访问它。

【讨论】：

在离开 /home/xxx 时如何使用这种内部状态来保存位置？

【参考方案2】：

我从未尝试过这种类型的事情，但 React Router 有历史“组件/道具”。请参阅此处的文档： https://github.com/ReactTraining/history#properties