Этот вопрос посвящен компоненту заголовка:
Так в моем приложении. У меня есть что-то похожее на это с несколькими дополнительными компонентами и большим количеством маршрутов:
return (
<SiteLayoutContext.Provider value={siteConfiguration} >
<div className="topContainer">
<BrowserRouter>
<div className="header">
<Header/>
</div>
<div className="mainWrapperContainer">
<div className="contentWrapper">
<Route exact path='/login' component={Login}/>
<Route exact path='/home' component={Home}/>
<Route exact path='/about' component={About}/>
<Route exact path='/collection/:collectionName' component={CollectionLandingPage}/>
<Route exact path='collection/:collectionAlias/id/:itemId' component={ItemView}/>
</div>
<Footer/>
</div>
</BrowserRouter>
</div>
</SiteLayoutContext.Provider>
)
Чего я хотел бы достичь:
Я могу сейчас установитьлоготип для заголовка.
Это замечательно, но я бы хотел, чтобы пользователь мог выбрать собственный логотип, который заменит глобальный по умолчанию, если они в коллекции.
Чтобы определить «внутри» коллекции , маршрут будет начинаться с /collection/, поэтому в приведенном ниже примере как ItemView, так и CollectionLandingPage должны иметь этот собственный логотип.
Мне нужно иметь возможность сообщить моему заголовку, что он в настоящее время находится в коллекции, и я хочу ограничить рендеринг и перерисовку для повышения производительности. У меня есть конечная точка API, которую я получаю, чтобы получить информацию о коллекции, которая сообщит мне, был ли установлен пользовательский логотип, и каков должен быть href.
То, что я пробовал:
Первоначально я хотел вырвать заголовок из основного return(), показанного выше, и вместо этого поместить его в каждый компонент таким образом, чтобы яможно использовать крючок React useLocation() для проверки URL и извлекать логотип коллекции, только если
1) мы находимся в коллекции и
2) установлен собственный логотип.
Моя проблема с этим методом заключается в том, что теперь мне нужно вводить заголовок в каждый отдельный компонент вместо того, как он реализован в настоящее время.
Моя вторая мысль - обернуть все это в некоторый контекст , используйте его в каждом компоненте и обновите его на основе URL-адреса, который затем извлечет соответствующую информацию, но при этом он просто чувствует off . Я полагаю, я мог бы получить информацию для коллекции и обновлять новый CollectionInfoContext каждый раз, когда я нажимаю /collection/:collectionName, который обновляется только при изменении collectionName?
Я просто ищу предложения о том, как реализовать это , потому что хорошо ... Я чувствую, что есть вариант, которого я не перечислил, который, вероятно, намного проще и разумнее. .. как стандарт стека переполнения.
Отказ от ответственности: я реагирую на контекст api новичок