Блог

Главная - Вопросы по программированию - Почему ссылка React обновляет URL, а не страницу?

Почему ссылка React обновляет URL, а не страницу?

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

Вопрос:

         <Switch>
          <Route path="/" exact component={LocationSelection} />
          <Route path="/login" component={Login} />
          <Route path="/category/:categoryid" component={Category} />
        </Switch>
      </Router>

Вот category компонент,который я хочу отобразить. Внутри category компонента у меня есть Footer компонент, amp; inside that, I've a который я отображаю.

       <div className="flex flex-row  items-center hide-scroll gap-4 px-md mt-3 whitespace-nowrap overflow-x-scroll overflow-y-hidden">
        {categoryList
          .filter((item) => item.category_id !== currentId)
          .map((category) => {o
            return (
              <Dishes
                key={category.category_id}
                category={category}
                languageLabels={languageLabels}
                loading={loadingCategories}
                isInFooter={true}
              />
            );
          })}
      </div>

Dishes.js

 <Link
          className={`${
            isInFooter
              ? "relative rounded aspect-w-7 aspect-h-3 break-words bg-gray-200 min-w-md"
              : "relative rounded aspect-w-16 aspect-h-17 bg-gray-200 w-full"
          }`}
          to={`/category/${category.category_id}`}
          onClick={getCurrentId}
        >
          <img
            src={category.image_url}
            alt=""
            className="object-cover w-full h-full rounded absolute inset-0"
          />
          <div className="absolute left-2.5 top-1.25 right-1.25 ">
            <h3 className="font-metropolis_bold uppercase text-white whitespace-normal">
              {category.title}
            </h3>
            <p className="text-xxs font-metropolis_medium text-white">
              {category.options} {languageLabels.options_available}
            </p>
          </div>
        </Link>

Это обновляет URL-адрес, но не всю страницу.
Я попытался обернуть этот компонент, withRouter но все равно страница не обновляется.

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

1. «Это обновляет URL-адрес, но не всю страницу» означает ли это, что ваш компонент не отображается, но URL-адрес в браузере изменен?

2. вот именно, именно так @Nemanja

Ответ №1:

Удалите exact из path=/ и добавьте его для /category такого пути, как этот

 <Switch>
         <Route path="/category/:categoryid" exact component={Category} /> 
          <Route path="/" component={LocationSelection} />
          <Route path="/login" component={Login} />
         
        </Switch>

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

1. Действительно извините за поздний повтор, и я попробовал ваше решение, но оно не позволяет мне перейти на другую страницу. Это большое приложение, я не показал вам весь код. « <Путь маршрута=»/» точный компонент={Выбор местоположения} /> <Путь маршрута=»/» точный компонент={Выбор местоположения} /><Путь маршрута=»/вход» компонент={Вход} /> <Путь маршрута=»/вход» компонент={Вход} /><Путь маршрута=»/проверка» компонент={Проверка} /> <Путь маршрута=»/проверка» компонент={Проверка} /><Путь маршрута=»/главная» компонент={Домашняя страница} /> <Путь маршрута=»/главная» компонент={Домашняя страница} /><Путь маршрута=»/лояльность» компонент={Лояльность} /> <Путь маршрута=»/лояльность» компонент={Лояльность} /><Путь маршрута=»/категория/:идентификатор категории» компонент={Категория} /> «

2. Если я здесь удалю exact из path=/ , это не позволит мне уйти /home . Здесь немного запутанно все объяснять. Еще раз извините, что заставил вас ждать. @Неманья

Метки: ,