Как настроить React App на сервере, чтобы у меня были ссылки, как я хочу их?

Question

Я создал React WebShop для тестирования с использованием учебного пособия и хотел интегрировать его в свой веб-сайт для тестирования, но, к сожалению, каждый раз, когда я это делаю, приложение портится.Смысл ссылки не имеет смысла.Например, я хотел бы, чтобы, если я ввожу mywebsite.com/Shop, отображался магазин.Но в тот момент, когда я вхожу в каталог, в котором находится приложение (адрес указан выше), я возвращаю компонент по умолчанию для кода ошибки 404, а не мой обзор продукта.

Извините, но я не могу объяснитьчто я имею в виду очень хорошо.

Git: https://github.com/Arborem123/webshop

Answer 1

В настоящее время ваша маршрутизация настроена следующим образом:

<Switch>
  <Route exact path="/" component={ProductList} />
  <Route path="/details" component={Details} />
  <Route path="/cart" component={Cart} />
  <Route component={Default} />
</Switch>

Не существует пути /shop, доступного для маршрутизатора, поэтому в конечном итоге он будет отображать ваш Default компонент, когда он провалится через Switch без совпадения с другими путями.Если вы хотите выставить маршрут /shop, вам нужно изменить Switch на что-то вроде этого:

<Switch>
  <Route path="/shop" component={ProductList} />
  <Route path="/details" component={Details} />
  <Route path="/cart" component={Cart} />
  <Route exact path="/" component{HomePage}
  <Route component={Default} />
</Switch>

Вы заметите, что я изменил ваш базовый маршрут /, чтобы он указывал на* Я знаю, что компонент HomePage не реализован.Это просто пример того, как завершить настройку маршрутизации.