Как заблокировать маршруты с помощью '/' в create-реагировать-приложение

Question

Я создаю просто SPA с четырьмя страницами и обнаружил одну большую проблему, которая приводит к сбою моего приложения.У меня есть четыре маршрута:

<Switch>
     <Route exact path='/przewodnictwo' component={Conductivity} />
     <Route exact path='/apartamenty' component={Apartments} />
     <Route exact path='/przewoz_osob' component={Transport} />
     <Route exact path='/narciarstwo' component={Skiing} />
     <Redirect from='*' to='/przewodnictwo' />
</Switch>

Все отлично работает, и мои ссылки NavLinks выглядят так:

<NavLink exact to='/apartamenty'>
       Apartamenty
</NavLink>

Все мои изображения загружаются из общей папки.Любые другие маршруты, такие как /example, /przewodnictwo/23, перенаправляют меня на главную страницу, которая /przewodnictwo.Но странные вещи случаются, когда я пишу в URL /przewodnictwo/ или /apartamenty/, они не блокируются, и мои изображения загружаются не из общей папки, а из /public/apartamenty/3.jpg, которого не существует.

РЕДАКТИРОВАТЬ

Я забыл добавить '/' к изображениям путей и теперь работает отлично.src = '1.jpg' был изменен на src = '/ 1.jpg' Спасибо за помощь.

Но как заблокировать маршрут '/ przewodnictwo /' ??Мне действительно не нравится этот URL, это ужасно

Answer 1

Чтобы заблокировать косые черты от совпадения с вашими маршрутами, вы можете использовать опору strict в компоненте Маршрут.

Источник: https://reacttraining.com/react-router/web/api/Route/strict-bool

<Route>

строгое: bool

Если true, путь с косой чертой будет совпадать только с именем location.path с косой чертой. Это не действует, если в location.pathname есть дополнительные сегменты URL.

Answer 2

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

Когда true, путь с косой чертой будет совпадать только с location.pathname с косой чертой.Это не действует, если в location.pathname.

<Switch>
     <Route exact strict path='/przewodnictwo' component={Conductivity} />
     <Route exact strict path='/apartamenty' component={Apartments} />
     <Route exact strict path='/przewoz_osob' component={Transport} />
     <Route exact strict path='/narciarstwo' component={Skiing} />
     <Redirect from='*' to='/przewodnictwo' />
</Switch>

есть дополнительные сегменты URL.