Как изменить фон заголовка на реагирующем роутере? - PullRequest
Новая
       53

Как изменить фон заголовка на реагирующем роутере?

0 голосов
/ 11 апреля 2019

Я новичок, чтобы отреагировать и попытаться сделать динамическое изменение фона заголовка базы на пути маршрутизатора, где я нахожусь.Я не хочу использовать redux.

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

<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>

Я ожидаю, что когда я изменю маршрут, цвет моего меню (заголовка) изменится.

Ответы [ 5 ]

1 голос
/ 11 апреля 2019

Так что, если вы попробуете что-то вроде: 

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, а затем соответствующим образом обновить класс компонента.

1 голос
/ 11 апреля 2019

Вы можете передавать реквизиты от маршрута к компоненту как, 

<Switch>
<Route exact path="/" render={() => {
<Home cls="white">}} />
<Route exact path="/lala" render={() => {
<lala cls="black">}} />
</Switch>

Тогда в вашем компоненте вы можете использовать это, 

<Menu className={this.props.cls}/>
0 голосов
/ 11 апреля 2019

Мой начальник, дайте мне это простое решение: 

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 я просто сохраняю свои маршруты без каких-либо изменений. Так что в этом случае мой дом должен иметь прозрачный bg, поэтому возьмите класс по умолчанию, и когда я пойду другим путем, мой bg станет белым.

Так что я добавляю только эту логику 

 function isHome() {
                return location.pathname === '/' ? true : false;
            }

и это 

{'bgwhite': !isHome()}
0 голосов
/ 11 апреля 2019

Вы также можете создать чекер что-то вроде: 


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'
0 голосов
/ 11 апреля 2019

Вы можете отобразить Меню, используя 

<Route component={Menu} />

Но вам нужно будет переместить стилизацию внутрь компонента меню.

Это даст компоненту меню реквизит маршрутизатора, чтобы вы могли проверить location и оформить его так, как вы хотите.

...