С
Size: a a a
2020 December 08
A
спасибо! сейчас буду курить
<NavLink to="/your-url" activeClassName="active">
Your Url
</NavLink>A
Та там все просто
A
Всем линкам дай добавь атрибут
AR
Ребят, всем привет.
Подскажите, пожалуйста, можно ли используя NavLink из react-router-dom сохранить активный класс для вложенных путей в которых содержится часть базового url?
Пример:
const NavBar = (props) => {
return (
<div className="navBar-wrap">
<NavLink exact to="/news">News</NavLink>
</div>
);
};
export default NavBar
const Content = (props) => {
return (
<Switch>
<Route exact path="/news" render={() => <News />} />
<Route exact path="/news/:catId" render={() => <NewsCats />}/>
<Route exact path="/news/:catId/:id" render={() => <NewsItem />}/>
</Switch>
)
};
export default Content
Другими словами, чтобы при нахождении по любому из урлов, в котором после домена есть /news, был присвоен активный класс главному роуту <NavLink exact to="/news">News</NavLink>
/news
/news/cat
/news/cat/item и т.д.
В документации нашёл withRouter, вроде это оно, но не знаю как его правильно применить, то ли им надо оборачивать компонент с навигацией, то ли с контентом, пробовал и так и сяк, не получается добиться нужного эффекта
Подскажите, пожалуйста, можно ли используя NavLink из react-router-dom сохранить активный класс для вложенных путей в которых содержится часть базового url?
Пример:
const NavBar = (props) => {
return (
<div className="navBar-wrap">
<NavLink exact to="/news">News</NavLink>
</div>
);
};
export default NavBar
const Content = (props) => {
return (
<Switch>
<Route exact path="/news" render={() => <News />} />
<Route exact path="/news/:catId" render={() => <NewsCats />}/>
<Route exact path="/news/:catId/:id" render={() => <NewsItem />}/>
</Switch>
)
};
export default Content
Другими словами, чтобы при нахождении по любому из урлов, в котором после домена есть /news, был присвоен активный класс главному роуту <NavLink exact to="/news">News</NavLink>
/news
/news/cat
/news/cat/item и т.д.
В документации нашёл withRouter, вроде это оно, но не знаю как его правильно применить, то ли им надо оборачивать компонент с навигацией, то ли с контентом, пробовал и так и сяк, не получается добиться нужного эффекта
убери exact из navlink и оно так будет работать
С
убери exact из navlink и оно так будет работать
почти! вместо exact надо было использовать strict и в конце url дописать /, а если просто убрать exact, то рендерятся сразу все компоненты, у которых есть в пути /news
С
ура) спасибо всем!
С
убери exact из navlink и оно так будет работать
хм, странно, сделал сейчас так, и всё норм, не рендерятся все компоненты, а до этого пробовал и рендерились все
AR
exact в navlink и exact в route о разном, может где-то что-то не то сменил
С
наверно
VF
подскажите плз как можно поставить в useState начальное значение из redux стора
VF
так не работает
AR
а что не работает?
AR
попробую угадать: currentPost не сразу есть в сторе и его нужно сначала загрузить?
VF
а что не работает?
именно
VF
currentPost && currentPost.title тоже не хочет
AR
useState не меняет своё значение, если при следующем рендере в него приходят другие данные
VF
useState не меняет своё значение, если при следующем рендере в него приходят другие данные
а как тогда можно это сделать?
AR
VF
можно через useDerivedState
код: https://gist.github.com/alexeyraspopov/3af6969361f07bc70badfcaa81f1d0b0
теория: https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
код: https://gist.github.com/alexeyraspopov/3af6969361f07bc70badfcaa81f1d0b0
теория: https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
спасибо, попробую