Как запомнить параметр URL-адреса React-Router при переходе на другую страницу, а затем обратно на страницу?

Question

Проблема:

У меня есть приложение React, которое использует React-Router-DOM для хэш-маршрутизации. Приложение имеет главную панель навигации с Home и About. Содержимое Home имеет панель навигации с A, B и C.

При переходе на www.mysite.com/#/home/ маршрутизатор по умолчанию (перенаправляет) на www.mysite.com/#/home/A.

При переходе от /#/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>

Примечания

Я знаю, что мне нужно будет изменить Redirect, это просто для удобства. Я также знаю, что мне придется изменить <NavLink to="/home">, чтобы каким-то образом включить свойство или состояние переменной, которые будут установлены при использовании одной из ссылок подменю, но я не знаю, как это сделать.

Answer 1

Использовать внутреннее состояние реакции-маршрутизатора.

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

<Redirect to={location}/>

Вы можете получить к нему доступ позже через this.props.location.state.

Answer 2

Я никогда не пробовал такого рода вещи, но у React Router есть история "component / props". Смотрите документацию здесь: https://github.com/ReactTraining/history#properties