я новичок, чтобы реагировать и пытаться сделать динамическое изменение фона базы заголовка на пути маршрутизатора, где я нахожусь. Я не хочу использовать редукс.
Пытаюсь реализовать без маршрутизатора, но безуспешно. Мне сложно понять, как изменить класс компонента вне маршрута. В моем случае мне нужно перейти на определенный класс.
<Menu className = "White"/> // <- wanna change this className = "" based on the route
<Switch>
<Route exact path = "/" component = {Home} /> // <- this should have White className menu <Menu className = "white" />
<Route exact path = "/lala" component = {lala} /> // <- this should have Black className menu <Menu className = "black" />
</Switch>
Я ожидаю, что когда я меняю маршрут, цвет моего меню (заголовка) меняется.
🤔 А знаете ли вы, что...
JavaScript позволяет создавать расширения для веб-браузеров, улучшая их функциональность.
Вы можете передавать реквизиты от маршрута к компоненту как,
<Switch>
<Route exact path = "/" render = {() => {
<Home cls = "white">}} />
<Route exact path = "/lala" render = {() => {
<lala cls = "black">}} />
</Switch>
Затем в вашем компоненте вы можете использовать это,
<Menu className = {this.props.cls}/>
Вы можете визуализировать меню, используя
<Route component = {Menu} />
Но вам нужно будет переместить стиль внутрь компонента меню.
Это даст компоненту меню реквизиты маршрутизатора, чтобы вы могли проверить location и стилизовать его по своему усмотрению.
Итак, если вы попробуете что-то вроде:
function MenuComponent(props) {
const [className, setClassName] = useState("white")
useEffect(function() {
setClassName(props.match.path === "/lala" ? "yellow" : "white")
}, [props.match.path])
return (
<div className = {className}>
...etc
</div>
)
}
export const Menu = withRouter(MenuComponent)
withRouter — это то, во что вы можете обернуть компонент, и обернутый компонент получит все реквизиты маршрутизатора, такие как совпадение и история. Затем вы можете проверить, изменяется ли путь во время эффекта или что-то вроде componentDidUpdate, а затем соответствующим образом обновить класс компонента.
Вы также можете создать средство проверки, например:
const currentUrl= window.location.href
const clsColor=
if (currentUrl.contains('/url-1'){ //or .includes()
return: 'red'
}else if (currentUrl.contains('/url-2')
return: 'white'
}else{
return: 'default-color'
}
// you can also use a cslColor = currentUrl.includes('/url-3') ? 'red' : 'white'
Мой начальник дал мне это простое решение:
import * as cn from 'classnames'
const Menu: React.FC<Props> = ({className, children, authenticated, handleAuthentication, location}) => {
function isHome() {
return location.pathname === '/' ? true : false;
}
return(
<div className = {cn('mydefaultclass', {'bgwhite': !isHome()}, className)}>
//etc
)}
И в моем App.tsx я просто сохраняю свои маршруты без каких-либо изменений. Итак, в этом случае мой дом должен иметь прозрачный фон, поэтому возьмите класс по умолчанию, и когда я перейду по другому пути, мой фон станет белым.
Поэтому я добавляю только эту логику
function isHome() {
return location.pathname === '/' ? true : false;
}
и это
{'bgwhite': !isHome()}