отремонтировать маршрутизатор this.props.location

Ответ 1

Ваш компонент navbar (как вы описали его в своем вопросе), вероятно, не является компонентом маршрута, верно? По route component я имею в виду тот, который вы используете в конфигурации вашего react-router, загружаемой для определенного маршрута.

this.props.location доступен только на таком route component, поэтому вам нужно передать его на свой navbar.

Возьмем пример:

Конфигурация вашего маршрутизатора:

<Router>
    <Route path="/" component={App}>
    // ...
</Router

Маршрут компонент App:

class App extends React.Component{
  // ...
  render() {
    return <Navbar location={this.props.location}/>
  }
}

Ответ 2

реактивный маршрутизатор v4

Из документации:

1. Свойство component <Route> должно использоваться, когда у вас есть существующий компонент. Свойство render <Route> принимает встроенную функцию, которая возвращает html.

2. <Route> без path всегда будет совпадать.

Исходя из этого, мы можем создать оболочку <Route> для любого уровня вашей HTML-структуры. Он всегда будет отображаться и иметь доступ к объекту местоположения.

Согласно вашему запросу, если пользователь заходит на страницу /profile, <header> будет иметь имя класса profile-header.

<Router>
    <Route render={({ location }) =>
        <header className={location.pathname.replace(/\//g, '') + '-header'}>
            // header content...
        </header>

        <div id="content"></div>

        <footer></footer>
    } />
</Router>

Ответ 3

Возможен сценарий, когда у вас может не быть доступа к props.location для передачи компоненту nav.

Возьмем для примера - в нашем проекте был компонент заголовка, который был включен в переключатель маршрутизации, чтобы сделать его доступным для всех маршрутов.

<Switch>
  <Fragment>
    <Header/>
    <Route path='..' component={...}/>
    <Route path='..' component={...}/>
  </Fragment>
</Switch>

В приведенном выше сценарии невозможно передать данные о местоположении в компонент Header.

Лучшим решением было бы использование withRouter HOC, когда ваш маршрутизатор не выводит компонент. Вы по-прежнему будете иметь доступ к истории свойств роутера, соответствию и местоположению, когда будете переносить его в withRouter HOC:

import { withRouter } from 'react-router-dom'
.... 
....
export default withRouter(ThisComponent)

Ответ 4

Я не мог решить это с помощью решений, приведенных здесь, и вот что сработало для меня:

Я импортировал history в свой компонент и присвоил history.location.pathname переменной, которую позже использовал для динамического манипулирования стилем.