Nextjs进入Else，但在浏览器中不返回所需的输出

Question

我正在尝试改进一个逻辑，其中，返回vale将依赖于浏览器URL中传递的参数。

但是当我试图打开http://localhost:3000/docs时，逻辑应该进入enter部分，而它不是，并显示404。

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

const docs = () => {
    const router = useRouter()
    const {params = []}  = router.query
    console.log(params)
    console.log(params.length)
    console.log("DEBUG-1")
    if (params.length == 2) {
        console.log("DEBUG-2")
        return(
            <p>
                Param 0 : {params[0]} <br></br>
                Param 1 : {params[1]}
            </p>
        );
    } else if (params.length == 1) {
        console.log("DEBUG-3")
        return(
            <p>
                Param 0 : {params[0]}
            </p>
        )
    } else {
        console.log("DEBUG-4")
        return (
            <p>docs Home Page</p>
        )
    }
}

export default docs

这是控制台输出：

[]
0
DEBUG-1
DEBUG-4

它显示“调试-4”，这是在其他，但它不显示“文档主页”在浏览器中。相反，它显示404

Answer 1

尝试用大写单词Docs重命名组件名称。用户定义的组件必须大写.阅读文档https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized