Estoy creando una plataforma de comercio electrónico en la que los usuarios utilizarán tanto nuestro dominio como sus propios dominios, como se muestra a continuación.
ourplatform.com/username
theirdomain.com
Me gustaría configurar los enlaces en línea según el dominio al que ingresan en el sitio. Si es nuestro dominio, debería ser /username/page o si es su dominio, debería ser simplemente /page .
Esto es lo que tengo hasta ahora. Solo agregando nombre de usuario si el dominio es nuestra plataforma.
import Link from 'next/link' const customPath = ({ username }) => { if (typeof window !== 'undefined') { return window.location !== 'ourplatform.com' ? '/' : `/${username}` } } export default ({ username }) => { const link = customPath({ username }) return ( <Link href={link}> Home </Link> ) }Pero estoy recibiendo este error.
Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead. ¿Cómo puedo configurar diferentes enlaces href para diferentes dominios?
Está limitando correctamente la evaluación de window.location a la fase del lado del cliente, pero aún necesitará que customPath() devuelva un valor para el componente <Link /> durante la fase de compilación del lado del servidor. Sin un valor devuelto, la constante de link se establecerá en undefined .
const customPath = ({ username }) => { if (typeof window !== 'undefined') { return window.location.hostname !== 'ourplatform.com' // include `.hostname` ? '/' : `/${username}` } return '/' // return something to satisfy server-side compilation }En lugar de usar directamente typeof window !== 'undefined' para acceder a window.location , le recomiendo que maneje la lógica customPath dentro de un useEffect para evitar discrepancias en la representación del lado del servidor.
Aquí hay un gancho personalizado que maneja la lógica de la ruta personalizada, sin arrojar ningún error/advertencia.
import Link from 'next/link' function useCustomPath({ username }) { const [customPath, setCustomPath] = useState('/') // Default path during SSR useEffect(() => { const path = window.location.hostname !== 'ourplatform.com' ? '/' : `/${username}` setCustomPath(path) // Set appropriate path on the client-side }, [username]) return customPath } export default ({ username }) => { const link = useCustomPath({ username }) return ( <Link href={link}> Home </Link> ) }