Компонент React не отображается при прямом вызове подпути

Question

У меня есть приложение Server Side Rendered React, в котором я использую HashRouter для маршрутизации реагирования (v5). Мои маршруты выглядят так:

<HashRouter basename="/">
   <Layout {...config} />
</HashRouter>

<Switch>
  <Route exact={true} path="/" component={LPComp} />
  <Route exact={true} path={this.props.siteBanner.Red} component={bannerPage} />
</Switch>

Когда я нажимаю localhost:8888/parent/ и когда он загружается, и если я нажимаю localhost:8888/parent/banner в том же окне, компонент bannerPage отображается нормально. Но я нажимаю localhost:8888/parent/banner напрямую (рассмотрим на новой вкладке), тогда компонент не отображается должным образом.

Есть идеи, почему это происходит?

Также добавить, когда я нажимаю localhost:8888/parent/banner Я вижу, что LPComp (маршрут по умолчанию) также загружается, а затем он внезапно исчезает, а компонент bannerPage отображается неправильно.

Заранее спасибо

Answer 1

Такое поведение имеет смысл, поскольку ваши маршруты основаны на prop / state this.props.siteBanner.Red. Итак, первое, что нужно сделать, это поставить console.log после ввода этого компонента.

  console.log(this.props.siteBanner.Red)

В вашем первом случае вы получаете доступ к этому компоненту от его родителя, таким образом, скорее всего, пропсы будут разрешены.

Во втором случае вы обращаетесь к нему напрямую, конечно, также от его родителя, но, скорее всего, у реквизита нет времени на быстрое решение. Пара возможностей

• useEffect - обновить эту переменную
• для получения значения требуется щелчок мыши
• setTimeout используется для отсрочки
• обратного вызова используется для получения этой переменной

Вы можете сказать, что есть задержка в 50 мс в разрешении этой опоры, но вам нужно самостоятельно выяснить, почему. Маршрут Dynami c более продвинутый, легко иметь постоянный маршрут.

Answer 2

Спасибо всем за своевременный ответ, мне удалось решить эту проблему, установив location=(req.url) на настроенном на стороне сервера маршрутизаторе c. Просматривая этот пример, я получил более широкую картину, которой мне не хватало. https://medium.com/javascript-in-plain-english/server-side-rendering-in-react-redux-ab0af31c9c4b