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

Question

问题：

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

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

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

例子：

1. 在浏览器中输入 URL www.mysite.com ==> 呈现/home/#/A
2. 使用子导航菜单Home选择B===> 渲染/#/home/B
3. 使用主导航菜单选择About==> 渲染/#/about
4. 使用主导航菜单选择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">以某种方式合并使用子菜单链接之一时将设置的变量属性或状态，但我不知道如何去做。

标签： javascriptreactjsreact-router

Answer 1

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