Next.js динамический маршрут сразу после индекса

25.02.2021Рубрика: ВопросыАвтор: admin

Обычно в Next.js вы можете создавать динамические маршруты с такими файловыми структурами, как:

pages / products / [id] .js, что приведет к www.website. ru / products / productId2323

Я пытаюсь получить идентификатор рабочей области в своем маршруте, чтобы при входе пользователя в систему их соответствующая рабочая область извлекалась из API, а затем они могли быть перенаправлены на маршрут, принадлежащий этой рабочей области, например:

www.website.com/WorkSpaceName/

Можно ли сделать это без промежуточной пули?

Post Views: 140

См. также: Apexchart исчезает при смене страницы в React

1 dynamic-routing next.js reactjs

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

BURGERFLIPPER101 25.02.2021 в 00:00
Вы можете сгруппировать все маршруты с именами следующим образом:
```
[18:10:47] /tmp/my-app ● $ tree -n 2 pages/
2 [error opening dir]
pages/
├── _app.js
├── index.js
├── posts
│   ├── [id].js
│   └── index.js
└── [workspace]
    ├── dashboard.js
    └── index.js

2 directories, 6 files
```
В этом случае запрос:
- /something/dashboard будет перенаправлен на pages/[workspace]/dashboard.js
- /something будет перенаправлен на pages/[workspace]/index.js
- /posts будет перенаправлен на pages/posts/index.js (поскольку нединамические маршруты имеют приоритет над динамическими)
- /posts/something будет перенаправлен на pages/posts/[id].js
В файлах pages/[workspace]/dashboard.js и pages/[workspace]/index.js исследуйте маршрутизатор следующим образом:
```
[18:10:50] /tmp/my-app ● $ cat pages/\[workspace\]/dashboard.js 
import { useRouter } from 'next/router'

const Dashboard = () => {
  const router = useRouter()
  const workspace = router.query.workspace

  return (
    <>
      <h1>Dashboard: {workspace}</h1>
    </>
  )
}

export default Dashboard
```
Должно дать ожидаемое значение, присвоенное переменной workspace (поэтому при посещении /something/dashboard должно отображаться Dashboard: something).
Ответить

Добавить комментарий