Обновление стиля панели навигации в зависимости от того, что отображается

Question

У меня есть hoc, который отображает следующее:

  render() {
            return (
                <div className={classes.Layout}>
                    <Toolbar color={this.state.color} />
                    <Switch>
                        <Route exact path='/' component={HomePage} />
                        <Route path='/treechart' render={props => (
                            <TreeChart />
                        )} />
                    </Switch>
                </div>
            )

        }

Моя цель - сделать так, чтобы панель инструментов имела разные цвета, когда активны разные маршруты.Как мне этого добиться?

Answer 1

Используйте location и withRouter от реактивного маршрутизатора.

withRouter(YourComponent)

Это обеспечивает местоположение в качестве опоры для вашего компонента.Затем вы можете получить доступ к текущему пути, используя this.props.location.pathname и соответственно установить цвет.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md