導航離開然后返回頁面時，我如何記住一個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訪問它。