Блог

Главная - Вопросы по программированию - Как я могу использовать один компонент (страницу) для нескольких маршрутов в следующем JS

Как я могу использовать один компонент (страницу) для нескольких маршрутов в следующем JS

#javascript #reactjs #next.js

#javascript #reactjs #next.js

Вопрос:

Как вы все знаете, в Next JS нет никакого маршрута, я пытаюсь создать веб-приложение в next JS, в котором я должен использовать один и тот же компонент для нескольких маршрутов без вставки копирования в другой каталог.

Структура Директроя:

 src
    pages
        new (AddListComponent)
        edit-[id] (AddListComponent)

AddListКомпонент

 import React from 'react'
import { withRouter } from 'next/router'

class Listing extends React.Component {
    constructor(props){
        super(props)
        this.state = {
        }
    }
    render () {
        return (
            <div>This is my new component</div>
        )
    }
}
export default withRouter(Listing)

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

1. Взгляните на nextjs.org/docs/routing/dynamic-routes .

Ответ №1:

Внутри каталога маршрутов вы можете импортировать и экспортировать компонент из другого каталога.

Внутри вашего второго маршрута /myPage2/index.js :

 import MyPage from ../myPage.js
export default MyPage

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

1. Я хотел бы знать, как это сделать, когда у нас есть динамические маршруты

Ответ №2:

Вы можете создать страницу с необязательными параметрами.

 pages
 ┣ tasks
 ┃ ┣ manage
 ┃ ┃ ┗ [[...id]].jsx
 ┃ ┣ index.jsx
 ┃ ┗ service.js
 ┣ _app.jsx
 ┣ dashboard.jsx
 ┣ index.jsx
 ┗ login.jsx

/tasks/manage и tasks/manage/14 будет маршрутизировать один и тот же компонент [[...id]].jsx

  • Не забудьте использовать двойные скобки и три точки. [[...foo]].jsx

Все маршруты можно сделать необязательными, включив параметр в двойные скобки ([[…slug]]).

Например, pages/post/[[…slug]].js будет соответствовать /post , /post/a , /post/a/b и так далее.

Пожалуйста, проверьте для получения дополнительной информации.

Метки: