Next.js 14中如何通过Link导航至页面内的parallel route（插槽）

针对你遇到的首页Parallel Route无对应URL路由，用锚点跳转产生混乱URL且逻辑冗余的问题，给你几个可行的解决方案：

方法一：自定义Link点击事件 + 自定义事件触发插槽切换 #

这种方式不需要修改URL，纯客户端状态控制，避免锚点带来的URL混乱：

1. 给导航栏的插槽链接添加slot标识，通过onClick拦截默认跳转：

import { useRouter } from 'next/router';
import Link from 'next/link';

const NavLink = ({ to, slot, children }) => {
  const router = useRouter();

  const handleSlotNav = (e) => {
    e.preventDefault();
    // 先跳转到首页（如果当前不在首页）
    const navToHome = router.pathname !== '/' 
      ? router.push('/', undefined, { shallow: true }) 
      : Promise.resolve();
    
    navToHome.then(() => {
      // 触发自定义事件通知首页切换插槽
      window.dispatchEvent(new CustomEvent('switch-slot', { detail: slot }));
    });
  };

  return slot ? (
    <Link href="/" onClick={handleSlotNav}>
      {children}
    </Link>
  ) : (
    <Link href={to}>{children}</Link>
  );
};

2. 在首页组件中监听这个自定义事件，切换对应插槽的显示：

import { useEffect, useState } from 'react';
import Slot1 from './slots/Slot1';
import Slot2 from './slots/Slot2';
import Slot3 from './slots/Slot3';

export default function Home() {
  const [activeSlot, setActiveSlot] = useState('slot1');

  useEffect(() => {
    const handleSwitch = (e) => {
      if (['slot1', 'slot2', 'slot3'].includes(e.detail)) {
        setActiveSlot(e.detail);
      }
    };
    window.addEventListener('switch-slot', handleSwitch);
    return () => window.removeEventListener('switch-slot', handleSwitch);
  }, []);

  return (
    <main>
      {activeSlot === 'slot1' && <Slot1 />}
      {activeSlot === 'slot2' && <Slot2 />}
      {activeSlot === 'slot3' && <Slot3 />}
    </main>
  );
}

方法二：优化锚点逻辑，统一URL格式 #

如果希望保留URL中的锚点标识，可优化路由处理逻辑，避免跳转其他页面时带锚点：

1. 自定义Link组件，区分普通路由和首页插槽锚点：

import Link from 'next/link';
import { useRouter } from 'next/router';

const CustomLink = ({ href, children }) => {
  const router = useRouter();
  const isHomeSlot = href.startsWith('/#');

  const handleSlotClick = (e) => {
    e.preventDefault();
    const slot = href.split('#')[1];
    // 强制跳转到首页+锚点，同时开启shallow模式避免重新渲染页面
    router.push(`/#${slot}`, undefined, { shallow: true });
  };

  return isHomeSlot ? (
    <Link href="/" onClick={handleSlotClick}>
      {children}
    </Link>
  ) : (
    <Link href={href}>{children}</Link>
  );
};

2. 首页组件监听URL的hash变化，自动切换插槽：

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Slot1 from './slots/Slot1';
import Slot2 from './slots/Slot2';
import Slot3 from './slots/Slot3';

export default function Home() {
  const [activeSlot, setActiveSlot] = useState('slot1');
  const router = useRouter();

  useEffect(() => {
    // 初始化时读取hash值
    const initHash = router.asPath.split('#')[1];
    if (initHash && ['slot1', 'slot2', 'slot3'].includes(initHash)) {
      setActiveSlot(initHash);
    }

    // 监听hash变化
    const handleHashChange = () => {
      const newHash = window.location.hash.slice(1);
      if (newHash && ['slot1', 'slot2', 'slot3'].includes(newHash)) {
        setActiveSlot(newHash);
      }
    };
    window.addEventListener('hashchange', handleHashChange);
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, [router.asPath]);

  return (
    <main>
      {activeSlot === 'slot1' && <Slot1 />}
      {activeSlot === 'slot2' && <Slot2 />}
      {activeSlot === 'slot3' && <Slot3 />}
    </main>
  );
}

方法三：React Context全局管理插槽状态 #

如果项目中需要在多个组件间共享插槽状态，用Context是更优雅的方式：

1. 创建插槽管理Context：

// contexts/SlotContext.js
import { createContext, useContext, useState } from 'react';

const SlotContext = createContext();

export const SlotProvider = ({ children }) => {
  const [activeSlot, setActiveSlot] = useState('slot1');

  const switchSlot = (slot) => {
    if (['slot1', 'slot2', 'slot3'].includes(slot)) {
      setActiveSlot(slot);
    }
  };

  return (
    <SlotContext.Provider value={{ activeSlot, switchSlot }}>
      {children}
    </SlotContext.Provider>
  );
};

export const useSlot = () => useContext(SlotContext);

2. 在_app.js中全局挂载Provider：

import { SlotProvider } from '../contexts/SlotContext';

export default function App({ Component, pageProps }) {
  return (
    <SlotProvider>
      <Component {...pageProps} />
    </SlotProvider>
  );
}

3. 导航栏Link组件调用Context方法切换插槽：

import Link from 'next/link';
import { useSlot } from '../contexts/SlotContext';
import { useRouter } from 'next/router';

const NavLink = ({ to, slot, children }) => {
  const { switchSlot } = useSlot();
  const router = useRouter();

  const handleSlotNav = (e) => {
    e.preventDefault();
    const navPromise = router.pathname !== '/' 
      ? router.push('/', undefined, { shallow: true }) 
      : Promise.resolve();
    
    navPromise.then(() => switchSlot(slot));
  };

  return slot ? (
    <Link href="/" onClick={handleSlotNav}>
      {children}
    </Link>
  ) : (
    <Link href={to}>{children}</Link>
  );
};

4. 首页组件直接从Context获取状态渲染插槽：

import { useSlot } from '../contexts/SlotContext';
import Slot1 from './slots/Slot1';
import Slot2 from './slots/Slot2';
import Slot3 from './slots/Slot3';

export default function Home() {
  const { activeSlot } = useSlot();

  return (
    <main>
      {activeSlot === 'slot1' && <Slot1 />}
      {activeSlot === 'slot2' && <Slot2 />}
      {activeSlot === 'slot3' && <Slot3 />}
    </main>
  );
}

内容的提问来源于stack exchange，提问作者fereshteh namazi