Компонент React Router v6 Link не меняет страницу по корневому URL-адресу

Я создал Link на Post, который ссылается на Post Page. При нажатии на ссылку с URL-адресом '/' ссылка работает неправильно, она отображает правильную ссылку в URL-адресе, например. http://localhost:3000/posts/624a771b42211849eaada885 но страница не перенаправляется, работает только если я обновляю страницу. Однако, если я нахожусь на своей странице Popular Posts, ссылка работает правильно. Чтобы было ясно, сообщение находится в компоненте под названием «Сообщения», который отображает все сообщения. Компонент «Сообщения» является общим компонентом для многих компонентов, таких как «Домашняя страница» ('/') и «Популярные сообщения» (/popular).

Ниже '/'.

<Link to = {`/posts/${_id}`}>
  <h2 className='post-title'>{title}</h2>
</Link>

Мои маршруты настроены следующим образом:

<Route element = {!token ? <Navigate replace to='/login' /> : <Navbar />}>
  <Route
    path='/'
    element = {<Home />}
  >
    <Route
      path='/popular'
      element = {<Popular />}
    />
    <Route 
      path='/posts/:postId' 
      element = {<PostPage />} 
    />
  </ Route>
</Route>

В моем Navbar у меня есть:

const Navbar = () => {

  return(
    <>
      <nav>
      </nav>
      <Outlet />
    </>
  )
}

и, наконец, в моем Home.js у меня есть это:

const Home = () => {
  return (
    <div>content</div>
    <div>content</div>
    <div className='home-posts-container'>
          {window.location.pathname === '/' ? <PopularPosts /> : 
           <Outlet />}
    </div>
    <div>content</div>
  )
}

Являются ли компоненты Navbar и Home рендерингом Outlet компонентов для рендеринга вложенных маршрутов? {window.location.pathname === '/' ? <PopularPosts /> : <Outlet />} не похоже на то, чем вы хотите заниматься. Можете ли вы опубликовать более полный и воспроизводимый код? stackoverflow.com/help/минимально-воспроизводимый-пример

Drew Reese 07.04.2022 01:04

отредактировал выше, извините за неполный код, думал, что добавил то, что нужно. Не понимал, что контекст может быть проблемой. Спасибо @DrewReese

Dylan L. 07.04.2022 01:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Из того, что я могу сказать о вашем компоненте Home с

const Home = () => {
  return (
    <>
      <div>content</div>
      <div>content</div>
      <div className = "home-posts-container">
        {window.location.pathname === "/" ? <PopularPosts /> : <Outlet />}
      </div>
      <div>content</div>
    </>
  );
};

Вы хотите отобразить компонент PopularPostsточно, когда путь равен "/", в противном случае вы хотите отобразить один из совпадающих вложенных маршрутов.

Проблема в том, что в приведенной выше реализации Outlet не отображается при изменении пути, поэтому ни один из вложенных маршрутов не соответствует.

Похоже, вы хотите, чтобы компонент Home был маршрутом макета, он должен отображать все элементы div и содержимое, и простоOutlet. Переместите компонент PopularPosts в индексный маршрут.

const Home = () => {
  return (
    <>
      <div>content</div>
      <div>content</div>
      <div className = "home-posts-container">
        <Outlet />
      </div>
      <div>content</div>
    </>
  );
};

...

<Routes>
  <Route element = {!token ? <Navigate replace to = "/login" /> : <Navbar />}>
    <Route path = "/" element = {<Home />}>
      <Route index element = {<PopularPosts />} />
      <Route path = "/popular" element = {<Popular />} />
      <Route path = "/posts/:postId" element = {<PostPage />} />
    </Route>
  </Route>
</Routes>

Edit react-router-v6-link-component-not-changing-the-page-at-root-url

Для получения дополнительной информации см.:

Другие вопросы по теме