Next.js 15路由切换时保留组件筛选状态的解决方案咨询

Great question! Let's break down the core issue here: when navigating between dynamically generated static pages (using generateStaticParams) via Next.js's <Link>, you want to preserve client-side filter state without relying on localStorage or query params. The key here is leveraging Next.js 15 and React 19's client-side routing and state management capabilities effectively—here are a few solid approaches:

1. Convert your page component to a client component (simplest fix if feasible) #

In Next.js 15, if your page component is marked with 'use client', navigating between dynamic route segments (like /category1 → /category2) will use client-side routing instead of fetching from the server. This means your client-side components (like Filters) won't unmount/remount, so their internal state stays intact.

The trick is to keep any server-side logic (like data fetching) isolated in a separate server component, so you don't lose the benefits of static generation:

// app/[category]/page.tsx
'use client'; // Mark the page as a client component
import { useParams } from 'next/navigation';
import Filters from '../components/Filters';
import CategoryLinks from '../components/CategoryLinks';
import ServerContent from './ServerContent'; // Extract server logic to a separate server component

export async function generateStaticParams() {
  // Your existing static params logic here
  const categories = ['category1', 'category2', 'category3'];
  return categories.map((category) => ({ category }));
}

export default function CategoryPage() {
  const { category } = useParams() as { category: string };

  return (
    <div className="page-container">
      <Filters />
      <CategoryLinks />
      {/* Server-side content is isolated to its own component */}
      <ServerContent category={category} />
    </div>
  );
}

// app/[category]/ServerContent.tsx
// This remains a server component for data fetching/rendering
export default async function ServerContent({ category }: { category: string }) {
  // Your server-side data fetching logic here
  const categoryData = await fetchCategoryData(category);
  return (
    <div className="content">
      <h1>{category}</h1>
      {/* Render your server-fetched content */}
    </div>
  );
}

2. Lift filter state to a client-side root layout with Context #

If you need to share filter state across multiple pages (not just this category set), lifting state to your root layout (marked as 'use client') ensures the state survives route changes. Unlike putting the Context Provider in the page component (which unmounts on navigation), the root layout persists across all routes.

First, set up the context in your root layout:

// app/layout.tsx
'use client';
import { createContext, useState, useContext, ReactNode } from 'react';

// Define your filter type to match your actual filter shape
type FilterState = {
  priceRange: [number, number];
  tags: string[];
};

const FiltersContext = createContext<{
  filters: FilterState;
  setFilters: (updates: Partial<FilterState>) => void;
} | null>(null);

export function FiltersProvider({ children }: { children: ReactNode }) {
  const [filters, setFilters] = useState<FilterState>({
    priceRange: [0, 1000],
    tags: [],
    // Your initial filter values
  });

  const updateFilters = (updates: Partial<FilterState>) => {
    setFilters(prev => ({ ...prev, ...updates }));
  };

  return (
    <FiltersContext.Provider value={{ filters, setFilters: updateFilters }}>
      {children}
    </FiltersContext.Provider>
  );
}

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <FiltersProvider>{children}</FiltersProvider>
      </body>
    </html>
  );
}

Then use it in your Filters component:

// app/components/Filters.tsx
'use client';
import { useContext } from 'react';
import { FiltersContext } from '../layout';

export default function Filters() {
  const context = useContext(FiltersContext);
  if (!context) throw new Error('Filters must be used within FiltersProvider');

  const { filters, setFilters } = context;

  return (
    <div className="filters">
      {/* Example price range filter */}
      <div>
        <label>Min Price: {filters.priceRange[0]}</label>
        <input
          type="number"
          value={filters.priceRange[0]}
          onChange={(e) => setFilters({ priceRange: [Number(e.target.value), filters.priceRange[1]] })}
        />
      </div>
      {/* Add other filter controls here */}
    </div>
  );
}

3. Use a lightweight client-side state management library (Zustand/Jotai) #

If you want a more scalable solution (especially if you need to share state across more components later), libraries like Zustand or Jotai are perfect. They store state globally on the client, so it persists across route changes without needing context providers wrapping your entire app.

Here's a quick example with Zustand:

// app/store/filters.ts
'use client';
import { create } from 'zustand';

type FilterState = {
  priceRange: [number, number];
  tags: string[];
};

type FilterActions = {
  setFilters: (updates: Partial<FilterState>) => void;
  resetFilters: () => void;
};

export const useFiltersStore = create<FilterState & FilterActions>((set) => ({
  priceRange: [0, 1000],
  tags: [],
  setFilters: (updates) => set((prev) => ({ ...prev, ...updates })),
  resetFilters: () => set({ priceRange: [0, 1000], tags: [] }),
}));

Use it in your Filters component:

// app/components/Filters.tsx
'use client';
import { useFiltersStore } from '../store/filters';

export default function Filters() {
  const { priceRange, tags, setFilters } = useFiltersStore();

  return (
    <div className="filters">
      {/* Price range control */}
      <div>
        <label>Max Price: {priceRange[1]}</label>
        <input
          type="number"
          value={priceRange[1]}
          onChange={(e) => setFilters({ priceRange: [priceRange[0], Number(e.target.value)] })}
        />
      </div>
      {/* Tag filter buttons */}
      <div>
        {['tag1', 'tag2', 'tag3'].map((tag) => (
          <button
            key={tag}
            className={tags.includes(tag) ? 'active' : ''}
            onClick={() => setFilters({
              tags: tags.includes(tag) ? tags.filter(t => t !== tag) : [...tags, tag]
            })}
          >
            {tag}
          </button>
        ))}
      </div>
    </div>
  );
}

Bonus: Verify your Next.js navigation behavior #

Double-check that your <Link> components aren't forcing server-side navigation. By default, Next.js's <Link> uses client-side routing for statically generated pages. If you're seeing server fetches on navigation, make sure:

• You're using next/link correctly (no forceServerRender prop)
• Your generateStaticParams is correctly generating all required routes so Next.js doesn't fall back to server-side rendering

备注：内容来源于stack exchange，提问作者Mils