如何在 Next JS 中使用一个组件（页面）进行多条路由

Question

众所周知，Next JS 没有任何路由，我正在尝试在 next JS 中构建一个 Web 应用程序，其中我必须对多个路由使用相同的组件，而无需复制粘贴到不同的目录。

目录结构：

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

添加列表组件

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)

Answer 1

在路由目录中，您可以从另一个目录导入和导出组件。

在第二条路线 /myPage2/index.js 中：

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

Answer 2

您可以创建带有可选参数的页面。

\n

pages\n \xe2\x94\xa3 tasks\n \xe2\x94\x83 \xe2\x94\xa3 manage\n \xe2\x94\x83 \xe2\x94\x83 \xe2\x94\x97 [[...id]].jsx\n \xe2\x94\x83 \xe2\x94\xa3 index.jsx\n \xe2\x94\x83 \xe2\x94\x97 service.js\n \xe2\x94\xa3 _app.jsx\n \xe2\x94\xa3 dashboard.jsx\n \xe2\x94\xa3 index.jsx\n \xe2\x94\x97 login.jsx\n

\n

/tasks/manage并将tasks/manage/14路由相同的组件[[...id]].jsx

\n

\n
• 不要忘记使用双括号和三个点。\n[[...foo]].jsx
\n

\n

\n

通过将参数包含在双括号 ([[...slug]]) 中，可以将所有路由设为可选。

\n

例如，pages/post/[[...slug]].js 将匹配 /post、/post/a、\n/post/a/b 等。

\n

\n

请查看更多信息。

\n