Условный рендеринг компонента на основе маршрута в следующем js

#reactjs #react-router #next.js #router

#reactjs #реагировать-маршрутизатор #next.js #маршрутизатор

Вопрос:

есть ли способ условно отображать компоненты на основе URL в next.js ?

Редактировать:

как будто сейчас я делаю это:

 const router = useRouter();

return (
  <>
    <SomeComponent />
    {router.pathname === "/somePath" amp;amp; <RenderThis />}
  </>
)

Мне интересно, есть ли лучший / более чистый способ для этого условного рендеринга? Нравится…

 <>
  <SomeComponent />
  <Route path="/additionalUrl" component={RenderThis} />
</>

//or

<>
  <SomeComponent />
  <Route path="/additionalUrl">
     <RenderThis />
  </Route>
</>

1. Не могли бы вы уточнить свой вопрос? Вы можете использовать объект маршрутизатора, возвращаемый перехватчиком useRouter, для получения переменных запроса. nextjs.org/docs/api-reference/next/router

2. Я отредактировал вопрос. теперь это намного конкретнее.

3. Вы нашли какое-нибудь решение для этого? Условный рендеринг определенного компонента на другой странице на основе URL-адреса?

Ответ №1:

Стиль вашего второго примера напоминает React Router, поэтому я вижу, откуда вы пришли.

Однако в Next.js , реализована маршрутизация на основе файловой системы, и маршрутизация обрабатывается для вас на основе имени файла в /pages каталоге.

Если вы обрабатываете много разных параметров запроса в своих URL-адресах, Next.js обрабатывает и это, используя динамические маршруты

Из приведенных выше связанных документов:

Рассмотрим следующую страницу pages/post/[pid].js :

 import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

Любой маршрут /post/1 /post/abc , например, , и т.д. будет соответствовать pages/post/[pid].js . Соответствующий параметр пути будет отправлен на страницу в качестве параметра запроса и будет объединен с другими параметрами запроса.

1. динамическая маршрутизация /[pid].js отображает или не отображает всю страницу целиком на основе URL-адреса. Я уже использую это для многих своих страниц. Я просто не знаю, как перенаправить определенный компонент на странице (всплывающее окно и т. Д.) На основе URL.