导航离开然后返回页面时，我如何记住一个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导航”链接导航回到Home ，返回到#/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">更改<NavLink to="/home">以某种方式合并一个可变属性或状态，该属性或状态将在使用子菜单链接之一时设置，但我不知道该怎么做关于这样做。

Answer 1

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

Answer 2

使用react-router的内部状态。

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

<Redirect to={location}/>

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