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

Question

问题：

我有一个使用 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

示例：

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"> 以某种方式合并使用子菜单链接之一时将设置的变量属性或状态，但我不知道该怎么做。

Answer 1

使用 react-router 的内部状态。

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

<Redirect to={location}/>

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

Answer 2

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