Альтернативы React Router? Использование событий щелчка для изменения состояния «маршрута» для условной загрузки компонентов, но нужна помощь с историей URL

Question

Как гласит заголовок, вместо использования React Router для загрузки маршрутов и компонентов, основанных на этих маршрутах, я просто использовал события 'onClick', чтобы изменить this.state.route в моем App.js и условно загружать компоненты на основеот текущей стоимости этого.Проект представляет собой приложение подкаста, которое использует Itunes API для извлечения и загрузки состояния.

Я пытался добавить response-router-dom, но, будучи совершенно незнакомым с ним, я не могу понять, как наиболее легковозьмите мой текущий код и интегрируйте его с реагирующим маршрутизатором.

Одна из проблем, с которыми я сталкиваюсь, - это возможность загружать компоненты со всеми необходимыми им реквизитами за пределами того, что дает вам React Router, поскольку вы вводите только имя компонента внутри без каких-либо опций для добавления реквизитов.Я смог просто добавить вокруг своих элементов события click, и это выполняет правильный код для загрузки правильных компонентов с правильным маршрутом в URL, но, конечно, он не сохраняет историю / состояние для использованияКнопки «назад» / «вперед» встроены в браузер.

Скажите, пожалуйста, здесь есть что-то простое, что мне не хватает, поэтому мне не нужно полностью реорганизовывать мой проект?

Оставляя много кодаздесь для краткости / читабельности, но вот часть моего компонента App.js:

class App extends Component {
  constructor() {
    super();
    this.state = {
      popular: [],
      searched: [],
      searchTerm: '',
      route: 'discover',
      genresMenu: [],
      genrePodcasts: { name: '', podcasts: [] },
      curatedLists: [],
      episodesObj: { id: '', title: '', image: '', publisher: '', episodes: [], website: '' },
      playBarObj: { audio: '', image: {}, enclosure: {}, title: '', publisher: '', pubdate: '' },
      hasPlayed: '',
    }
  }

  componentDidMount() {
  this.getMenuItems();
  this.state.route === 'popular' 
      ? this.getPopular() 
      : this.getDiscover()
  }

  getDiscover = () => {
    this.getPopular();
    this.getCuratedLists();
    this.getRandomGenre();
  }

  changeRoute = (route) => {
    if (route === 'popular') {
      this.setState({ route: 'popular' });
      this.getPopular();
    } else if (route === 'discover') {
        this.setState({ route: 'discover' });
        this.getDiscover()
      }
  }


  render() {
    const { route } = this.state;
    return (
      <Router>
        <div className="App">
         <Navigation changeRoute={this.changeRoute} getSearchedPodcasts={this.getSearchedPodcasts} />
         <section className="section">
           {route === 'episodes' && <Episodes episodesObj={this.state.episodesObj} postPlayBarObj={this.createPlayBarObj} />
           <div className="case">
             {route !== 'episodes' && <Menu genres={this.state.genresMenu} />}
             {route === 'popular' && <Popular podcasts={this.state.popular} />}
             {route === 'search' && <Search podcasts={this.state.searched} />}
             {route === 'discover' && <Discover getEpisodes={this.getEpisodes} topPodcasts={this.state.popular} />}
             {route === 'curatedPodcasts' && <CuratedPodcasts curatedListObj={this.state.curatedListObj} getEpisdoes={this.getEpisodes} />}
             {route === 'genre' && <GenrePodcasts genrePodcasts={this.state.genrePodcasts} getEpisodes={this.getEpisodes} />}
           </div>
         </section>
           <nav className="navbar fixed-bottom>
             <PlayBar playBarObj={this.state.playBarObj} hasPlayed={this.state.hasPlayed} />
           </nav>
         </div>
       </Router>
     );
   }
}

export Default App;

А затем, что касается того, как я загружаю маршруты из clickEvents из компонента, я буду использовать компонент навигации какпример.Иногда я использую явную функцию для изменения маршрута, а иногда просто меняю состояние в зависимости от того, какая функция вызывается для выполнения остальной логики.Опять же, я постараюсь опустить большую часть ненужной бизнес-логики, а также HTML.

const Navigation = ({ getSearchedPodcasts, changeRoute, }) => {
  const [menuSearchNode, setMenuSearchNode] = useState();
  const [navSearchNode, setNavSearchNode] = useState();

  let setSearchNodes = () => {
    setMenuSearchNode(document.querySelector('.menu-search'));
    setNavSearchNode(document.querySelector('.nav-search'));
  } 

  useEffect(setSearchNodes); 

  let handlePopularClick = (e) => {
    e.target.parentNode.classList.add('active');
    document.querySelector('.nav-item-discover').classList.remove('active');
    changeRoute('popular')
  }

  let handleDiscoverClick = (e) => {
    e.target.parentNode.classList.add('active');
    document.querySelector('.nav-item-popular').classList.remove('active');
    changeRoute('discover')
  }


  return ( 
    <nav>
      <div className="collapse navbar-collapse" id="navbarsExample04">
        <ul className="navbar-nav mr-auto">
          <li className="nav-item nav-item-discover active">
            <Link to='/discover' 
                onClick = { (e) => handleDiscoverClick(e) }
                className="nav-link" href="/discover">Discover <span className="sr-only">(current)</span></Link>
          </li>
          <li className="nav-item nav-item-popular">
            <Link to='/popular'
                onClick = { (e) => handlePopularClick(e) }
                className="nav-link">Popular</Link>
          </li>
        </ul>
      </div>
    </nav>
  );
}

export default Navigation;

Так что, если вы не можете сказать, что произойдет, если я нажму одну из ссылок в компоненте навигациии он обрабатывает эти клики, устанавливая состояние в App.js в соответствии с маршрутом, который я хочу загрузить.Я загружаю маршрут / компонент через простые условные операторы в App.js и все отлично.URL обновляется, компонент загружается, и это действительно отличное приложение для моего первого знакомства с React.Конечно, проблема в том, что состояние истории / URL-адреса не записывается, и хотя нажатие кнопок «назад / вперед» изменит URL-адрес, состояние приложения остается прежним.

Какие у меня есть вариантыисправить это наименее болезненными способами?Я пытался использовать «Switch», но я не могу понять, как загрузить компоненты с помощью ужасного бурения, которое я использую.Я могу сказать, что да, в следующий раз я буду собирать с учетом Context / Redux и React Router, но наверняка есть способ сделать эту работу также хорошо?