Блог

Главная - Вопросы по программированию - проверка правильности маршрута react router

проверка правильности маршрута react router

#reactjs #react-router #react-router-dom

#reactjs #react-маршрутизатор #react-router-dom

Вопрос:

Я использую react router v5 и хотел бы проверить свои маршруты, чтобы убедиться, что они действительны, поскольку моя страница 404 не запускается при отображении недопустимой ссылки, предположительно, потому, что маршрут по-прежнему совпадает, даже если в маршруте нет элемента для отображения, поскольку он недействителен. например, example.com/cat1/product1 является действительным и example.com/cat1/produc1 недействительным.

То же самое для категорий, example.com/cat1 являющихся действительными и example.com/ca1 являющихся недействительными.

В настоящее время он просто не показывает содержимое для недопустимой ссылки вместо моего NotFound компонента.

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

   <Switch>
            <Route exact path="/">
              <Home categories={categories} products={products} />
            </Route>
            <Route exact path="/product-categories">
              <Products categories={categories} />
            </Route>
            <Route exact path="/delivery">
              <Delivery categories={categories} />
            </Route>
            <Route exact path="/terms">
              <Terms categories={categories} />
            </Route>
            <Route exact path="/privacy">
              <Privacy categories={categories} />
            </Route>
            <Route exact path="/returns">
              <Returns categories={categories} />
            </Route>
            <Route exact path="/about">
              <About categories={categories} />
            </Route>
            <Route path="/sitemap.xml" onEnter={reload}/>
            <Route path="/robots.txt" onEnter={reload}/>
            <Route exact path="/:catSlug">
              <ProductsList categories={categories} products={products} userCountry={userCountry}/>
            </Route>
            <Route exact path="/:catSlug/:productSlug">
              <Product alertIsVisble={() => dispatch(allActions.showAlert())} categories={categories} products={products} userCountry={userCountry} />
            </Route>
            <Route>
              <NotFound categories={categories} />
            </Route>
          </Switch>

Комментарии:

1. Это то, что вы должны обработать в своем компоненте. когда для заданного идентификатора данные не найдены. перенаправляет на 404.

2. @VaritJPatel прав, ReactRouter не будет знать, что допустимо в случае /:catSlug/:productSlug пути. вы заменяете что-либо его заполнителем, оно будет направлено на ваш компонент. Теперь на стороне компонента / контейнера вы можете принять решение, является ли он допустимым или нет

3. Добавление к нему .. ReactRouter предоставляет перехват, это тоже может помочь reactrouter.com/core/api/Hooks/useroutematch