Error occurred prerendering page "/_not-found".(Next.js 15)

李乐發表於 2025-1-5 10:32:00

Error occurred prerendering page "/_not-found".(Next.js 15)

我们需要更新 <button type="button">UserProfile.tsx </button>组件，改用 <button type="button">Next.js </button>的 Link 组件而不是 react-router-dom 的 Link 组件。以下是解决方法：
这样可以确保组件更好地适应 <button type="button">Next.js </button>的框架，避免不兼容的问题。 
# 错误的代码
<div class="cnblogs_code">
<pre>'use client'

import React from 'react'
import { Box, Avatar, Typography, IconButton, Tooltip, useTheme } from '@mui/material'
import AlbumOutlinedIcon from '@mui/icons-material/AlbumOutlined'
import { Link } from 'react-router-dom'

interface ProfileProps {
userName?: string
designation?: string
userimg?: string
isCollapse?: boolean
}

export const Profile = React.forwardRef<HTMLDivElement, ProfileProps>(
({ userName = '', designation = '', userimg = '', isCollapse = false }, ref) => {
const theme = useTheme()
return (
 <Box>
 {isCollapse ? (
 ''
 ) : (
 <Box
 display={'flex'}
 alignItems='center'
 gap={2}
 sx={{ m: 3, p: 2, borderRadius: '8px', bgcolor: theme.palette.secondary.main + 20 }}
 >
 <Avatar alt='Remy Sharp' src={userimg} />

 <Box>
 <Typography variant='h6'>{userName}</Typography>
 <Typography variant='caption' color='textSecondary'>
 {designation}
 </Typography>
 </Box>
 <Box sx={{ ml: 'auto' }}>
 <Tooltip title='Logout' placement='top'>
 <Link to='/'>
 <IconButton color='primary' aria-label='logout' size='small'>
 <AlbumOutlinedIcon />
 </IconButton>
 </Link>
 </Tooltip>
 </Box>
 </Box>
 )}
 </Box>
)
}
)

Profile.displayName = 'Profile'</pre>
</div>
 
 # 正确的代码
<div class="cnblogs_code">
<pre>'use client'

import React from 'react'
import { Box, Avatar, Typography, IconButton, Tooltip, useTheme } from '@mui/material'
import AlbumOutlinedIcon from '@mui/icons-material/AlbumOutlined'
import Link from 'next/link'

interface ProfileProps {
userName?: string
designation?: string
userimg?: string
isCollapse?: boolean
}

export const Profile = React.forwardRef<HTMLDivElement, ProfileProps>(
({ userName = '', designation = '', userimg = '', isCollapse = false }, ref) => {
const theme = useTheme()
return (
 <Box>
 {isCollapse ? (
 ''
 ) : (
 <Box
 display={'flex'}
 alignItems='center'
 gap={2}
 sx={{ m: 3, p: 2, borderRadius: '8px', bgcolor: theme.palette.secondary.main + 20 }}
 >
 <Avatar alt='Remy Sharp' src={userimg} />

 <Box>
 <Typography variant='h6'>{userName}</Typography>
 <Typography variant='caption' color='textSecondary'>
 {designation}
 </Typography>
 </Box>
 <Box sx={{ ml: 'auto' }}>
 <Tooltip title='Logout' placement='top'>
 <Link href='/'>
 <IconButton color='primary' aria-label='logout' size='small'>
 <AlbumOutlinedIcon />
 </IconButton>
 </Link>
 </Tooltip>
 </Box>
 </Box>
 )}
 </Box>
)
}
)

Profile.displayName = 'Profile'</pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
 <table><tr><td><img style="border-top-width: 0pt; border-left-width: 0pt; border-bottom-width: 0pt; border-right-width: 0pt" alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc/2.5/cn/88x31.png" /> </td><td>本作品采用知识共享署名-非商业性使用 2.5 中国大陆许可协议进行许可。 </td> 
来源：https://www.cnblogs.com/sekihin/p/18653162

頁: [1]

琼殿技术论坛's Archiver

Error occurred prerendering page "/_not-found".(Next.js 15)