Обрабатываете «оверлейные страницы» с помощью React Router?

Question

Я пытаюсь создать стиль маршрутизации, который включает «наложение» страниц - модальное окно, которое появляется в верхней части предыдущей страницы (все еще видимое, поскольку наложение полупрозрачно), но меняет URL.Хорошим примером этого стиля является домашняя страница Product Hunt .

. Ранее я нашел решение, отобразив маршрут для наложения вне коммутатора, а затем сопоставив путь к источнику источника.ссылка (это будет связано предсказуемо только с двух разных точек зрения).Это сработало очень хорошо.

Выглядело это так:

    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/search" component={Search} />
      <Route exact path="/:category" component={Category} />
      <Route exact path="/:category/:id" component={Category} /> // this matches when overlay is active
    </Switch>
    <Route exact path="/:category/:id" component={Overlay} />

Теперь, однако, наложения могут отображаться со страницы поиска, и нажатие на результат поиска изменит базовый вид,где в идеале он останется на месте, если пользователь закроет оверлей или использует кнопку возврата.

Это заставило меня переосмыслить мою реализацию.Вместо непосредственного использования <Link> s для управления отображением оверлея, я теперь использую React Context для управления оверлеем, который теперь изменяет URL при монтировании.На данный момент это создает то же поведение, что и раньше, но мне интересно, могу ли я что-нибудь сделать, чтобы «сохранить» предыдущий URL-адрес и затем использовать его для управления тем, что выводит компонент <Switch>?

Есликто-нибудь имеет какой-либо вклад или опыт с таким поведением, это ценится.Я обязательно вернусь с моим решением, если найду хорошее.

Answer 1

Исходя из ответа @sherlock, мое решение выглядит так в TypeScript.

class FeedItemsPage extends React.Component<AllProps> {
  private location: Location

  constructor(props: AllProps) {
    super(props)

    this.location = props.location
    this.overrideLocation()
  }

  componentDidUpdate(prevProps: AllProps) {
    if (this.props.location !== prevProps.location) {
      this.overrideLocation()
    }
  }

  public render() {
    const { match } = this.props

    return (
      <>
        <Switch location={this.location}>
          <Route exact path={match.path + '/'} component={FeedItemsIndexPage} />
        </Switch>
        <Route path={match.path + '/:id'} component={FeedItemPage} />
      </>
    )
  }

  overrideLocation() {
    let location = Object.assign({}, this.props.location)
    location.pathname = this.props.match.path
    this.location = location
  }
}

Answer 2

Проведя некоторое исследование по документам о реагирующем маршрутизаторе, я обнаружил, что можно управлять location подпоркой Switch компонента, что в значительной степени именно то, что мне нужно.Поэтому я создал компонент-обертку, который использовал withRouter HOC для анализа изменений местоположения, и если текущий путь местоположения соответствовал моему пути наложения, предоставил бы 'предыдущий' объект местоположения для Switch, иначе он предоставит текущий,Поскольку реквизит location не меняется в соответствии с Switch, базовый вид не меняется и не перерисовывается, давая мне точное поведение, за которым я следовал.