Загрузить новый компонент при добавлении href в URL

Question

Я пытаюсь внедрить систему, чтобы при нажатии элемента в панели навигации он загружал новый компонент на экран.Я сталкиваюсь с проблемой создания нового URL и сохранения своего состояния.Позвольте мне уточнить.

Вот мой код навигационной панели:

<Nav pullRight activeKey="1" onSelect={k => this.handleSelect(k)}>
  <NavItem eventKey={1} href={'/component1'}>
    Component 1
  </NavItem>
  <NavItem eventKey={2} href={'/component2'}>
    Component 2
  </NavItem>
</Nav>

Вот мой дескрипторВыберите код:

handleSelect(eventKey, event) {
     this.setState({
         componentToLoad: eventKey
     });
     event.preventDefault();
 }

В моем рендере я делаю это:

render() {
    if(this.state.componentToLoad === 'component1'){
        return (<Component1/>);
    } else if(this.props.componentToLoad === 'component2'){
        return (<Component2/>);
}

Проблема, с которой я сталкиваюсь, заключается в том, что при добавлении href к URL-адресу страница перезагружается, и я теряю свое состояние, поэтому он всегда загружает компонент 1, потому что я установил его в конструкторе.Если я удаляю href, это работает, но URL не так, как я хочу.

Как получить это, чтобы загрузить компонент, который я хочу, добавить к URL и сохранить состояние?

Спасибо

Answer 1

Как уже упоминалось в комментариях, React Router - это хороший выбор для ваших требований. Вот кодовые окна с использованием React Router, просто иллюстрирующие описанную вами функциональность.

Вы также можете использовать браузер History API (см. Метод pushState), чтобы манипулировать URL-адресом напрямую без перезагрузки страницы, хотя имейте в виду, что в современных браузерах существуют некоторые различия в API .