Next.js 在 url 末尾添加 [object%20Object]

Question

使用“npm run dev”启动我的下一个应用程序时，在预渲染尝试期间出现此错误：

GEThttp://localhost:3000/aave/fundamentals/economics/[object Object] [HTTP/1.1 404 Not Found 434ms]

问题是这不依赖于这个特定的路径。如果我删除它，我仍然在另一个路径上......这是我的页面文件夹：pages folder

我不明白为什么 Next.js 一开始不能正确地影响我的页面。我认为这给我构建项目带来了问题。这在本地运行良好，即使我有这个错误，但每次我尝试构建时，我都有这个错误：错误导出在以下路径上遇到错误：ALL_PATHS

这仍然是一个虚拟项目，我没有获取任何数据，所以我也没有使用 getStaticProps() 函数或 getStaticPath()。如果我错了，请纠正我，但我认为我还不需要它，因为我没有与任何 API 交互。如果你认为我需要，我不知道我应该把这些函数放在哪个页面，因为没有“主”文件。

页面之间的所有链接都在这里处理（但我认为问题不存在）：

const router = useRouter();

const token = !router.query.protocoleId ? "aave" : router.query.protocoleId.toString();

const [analyticsUnfold, setAnalyticsUnfold] = useState(false);
const [overviewUnfold, setOverviewUnfold] = useState(false);
const [feUnfold, setFeUnfold] = useState(false);
const [marketUnfold, setMarketUnfold] = useState(false);
const [newsUnfold, setNewsUnfold] = useState(false);
const [sentimentUnfold, setSentimentUnfold] = useState(false);
const [feEconomicsUnfold, setFeEconomicsUnfold] = useState(false);

const analyticsUnfoldHandler = () => analyticsUnfold === false ? setAnalyticsUnfold(true) : setAnalyticsUnfold(false);
const overviewUnfoldHandler = () => overviewUnfold === false ? setOverviewUnfold(true) : setOverviewUnfold(false);
const feUnfoldHandler = () => feUnfold === false ? setFeUnfold(true) : setFeUnfold(false);
const marketUnfoldHandler = () => marketUnfold === false ? setMarketUnfold(true) : setMarketUnfold(false);
const newsUnfoldHandler = () => newsUnfold === false ? setNewsUnfold(true) : setNewsUnfold(false);
const sentimentUnfoldHandler = () => sentimentUnfold === false ? setSentimentUnfold(true) : setSentimentUnfold(false);
const feEconomicsUnfoldHandler = () => feEconomicsUnfold === false ? setFeEconomicsUnfold(true) : setFeEconomicsUnfold(false);

function redirect(path) {
    // console.log(path);
    // console.log(`/${token}/overview/${path}`);
    router.push(`/${token}/overview/snapshot`);
}

return(
    <ul className={styles.ul}>
        <ListItems onClick={analyticsUnfoldHandler} isUnfolding={true}>Analytics</ListItems>

        {analyticsUnfold && <ListItems onClick={overviewUnfoldHandler} isUnfolding={true} isSubItem={true} >Overview</ListItems>}
        {overviewUnfold && <Link href={`/${token}/overview/snapshot`} passHref ><div><ListItems isSubItem={true} >Snapshot</ListItems></div></Link>}
        {overviewUnfold && <Link href={`/${token}/overview/description`} passHref><div><ListItems isSubItem={true} >Description</ListItems></div></Link>}
        {overviewUnfold && <Link href={`/${token}/overview/estimates`} passHref><div><ListItems isSubItem={true} >Estimates</ListItems></div></Link>}
        {overviewUnfold && <Link href={`/${token}/overview/yield`} passHref><div><ListItems isSubItem={true} >Yield</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={feUnfoldHandler} isUnfolding={true} isSubItem={true} >Fundamentals Economics</ListItems>}
        {feUnfold && <ListItems onClick={feEconomicsUnfoldHandler} isUnfolding={true} isSubItem={true} >Economics</ListItems>}
        {feEconomicsUnfold && <Link href={`/${token}/fundamentals/economics/marketdesign`} passHref><div><ListItems isSubItem={true} >Market Design</ListItems></div></Link>}
        {feEconomicsUnfold && <Link href={`/${token}/fundamentals/economics/mechanismdesign`} passHref><div><ListItems isSubItem={true} >Mechanism Design</ListItems></div></Link>}
        {feEconomicsUnfold && <Link href={`/${token}/fundamentals/economics/tokendesign`} passHref><div><ListItems isSubItem={true} >Token Design</ListItems></div></Link>}
        {feUnfold && <Link href={`/${token}/fundamentals/fundamental`} passHref ><div><ListItems isSubItem={true} >Fundamental</ListItems></div></Link>}
        {feUnfold && <Link href={`/${token}/fundamentals/transactionnal`} passHref><div><ListItems isSubItem={true} >Transactionnal</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={marketUnfoldHandler} isUnfolding={true} isSubItem={true} >Markets</ListItems>}
        {marketUnfold && <Link href={`/${token}/markets/price`} passHref><div><ListItems isSubItem={true} >Price</ListItems></div></Link>}
        {marketUnfold && <Link href={`/${token}/markets/financialproducts`} passHref><div><ListItems isSubItem={true} >Financial Products</ListItems></div></Link>}
        {marketUnfold && <Link href={`/${token}/markets/fundflow`} passHref><div><ListItems isSubItem={true} >Fund Flow</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={newsUnfoldHandler} isUnfolding={true} isSubItem={true} >Latest News</ListItems>}
        {newsUnfold && <Link href={`/${token}/latestnews/newsevents`} passHref><div><ListItems isSubItem={true} >News and Events</ListItems></div></Link>}

        {analyticsUnfold && <ListItems onClick={sentimentUnfoldHandler} isUnfolding={true} isSubItem={true} >Sentiment</ListItems>}
        {sentimentUnfold && <Link href={`/${token}/sentiment/marketsentiment`} passHref><div><ListItems isSubItem={true} >Market Sentiment</ListItems></div></Link>}
        {sentimentUnfold && <Link href={`/${token}/sentiment/webscraping`} passHref><div><ListItems isSubItem={true} >Web Scraping</ListItems></div></Link>}
        {sentimentUnfold && <Link href={`/${token}/sentiment/webtracking`} passHref><div><ListItems isSubItem={true} >Web Tracking</ListItems></div></Link>}

    </ul>
);

}

Answer 1

好的，我发现了问题！在我的 _app.js 中，我插入了一个链接标签，我想在我的标签中添加一个网站图标......它被添加到页面的每个链接的末尾：

function MyApp({ Component, pageProps }) {
  return (
    <AppLayout>
      <Head>
        <title>Econteric</title>
        {/* <link rel="icon" href={logo} /> */} // THIS WAS THE PROBLEM
      </Head>
      <Component {...pageProps} />
    </AppLayout>
  );
}
export default MyApp;

非常感谢您的帮助，我在尝试构建最小可复制项目时发现了该错误。非常感谢，现在可以使用了！