Странное поведение response-router v4 с родительскими путями

Question

Предыстория: Я создаю это простое приложение и хочу, чтобы оно имело красивые URL с react-router v4.

У меня есть 3 основных компонента: {Home}, {List}, {Hotel}:

{Home} Компонент - простой компонент, в котором я могу выбрать country, datefrom и dateto и направить себя к {List}.

Пример текущего пути: http://url.com/

{List} Компонент - тяжелый компонент с картами, заполненными отелями со ссылками на / hotel / route.

Пример текущего пути: http://url.com/list/country/?datefrom=2019-01-01?dateto=2020-01-01

{Hotel} Компонент - большая часть приложения, тяжелый компонент с информацией об отеле и списком цен, разбитых по дням.

Пример текущего пути: http://url.com/hotel/country/hotel-name/?datefrom=2019-01-01?dateto=2020-01-01

Проблема: Я пытаюсь заменить /list/ и использовать /hotels/ для компонента {List}, поэтому у меня будет некоторая иерархия в структуре URL.

Но как только я попытался изменить /list/ -> /hotels/ для маршрута компонента {List}, все мое приложение разрывается, и меня встречают множество ошибок из компонента {Hotel}, это происходит, когда я попробуйте направить себя от {Home} компонента к {List}.

То, что я пробовал: Я пытался использовать <Switch> компонент, он делает {Home} -> {List} маршрут работы, но когда я пытаюсь направить себя дальше {Hotel} компонент, он фактически отображается внизу страницы и не заменяет мой {List}

Вот мой файл app.js, который дает мне странное поведение ...

import React from "react";
import { Route, BrowserRouter as Router } from "react-router-dom";

import Home from "./Home";
import List from "./List";
import Hotel from "./Hotel";

import './styles/app.scss';

class App extends React.Component {

  render() {
    return (
      <Router>
        <div className="app">
          <Route path="/" component={Home} exact />
          <Route path="/hotels/:selectedCountry/:datefrom?:dateto?" component={List} />
          <Route path="/hotels/:selectedCountry/:selectedHotel:datefrom?:dateto?" component={Hotel} />
        </div>
      </Router>
    );
  }
};

export default App;

Answer 1

Ваше определение маршрута неверно.

например, посмотрите на путь маршрута /hotels/:country/:id/:fromDate/:toDate, поэтому URL-адрес, подобный этому /hotels/usa/123/2019-01-01/2019-12-30, будет правильно отображаться на параметры маршрута, и вы сможете получить доступ к этим значениям в вашемкомпонент, такой как this.props.match.params.id и т. д., но если вы хотите использовать подход параметров запроса, вам нужно добавить знак & между двумя параметрами, такими как /hotels?country=usa&id=123&fromDate=2019-01-01&toDate=2019-12-30, и затем вы получите доступ к нему из window.location.href и проанализируете параметры запроса илииспользуйте пакет npm, например, query-params для разбора.В этом сценарии ваш маршрут будет просто /hotels

Answer 2

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

Пример взят из GitHub: URL списка коммитов: https://github.com/facebook/react/commits URL одного коммита: https://github.com/facebook/react/commit/ec6691a6

В вашем случае это будет:

<Route path="/hotels/your-search-params here" component={List} />
<Route path="/hotels/:hotelId:" component={Hotel} />