如何在跳转新页面时保留用户的搜索输入内容？

下面提供几种实用的实现方案，按需选择即可：

方案一：通过URL查询参数传递搜索值 #

跳转时将搜索值拼入URL参数，新页面从URL中读取并填充输入框，这种方式还能支持页面刷新后保留搜索值。

修改你的跳转逻辑：

let navigate = useNavigate(); 
const routeChange = () =>{ 
  // 用encodeURIComponent处理特殊字符，避免URL解析异常
  let path = `/ProductsNew?search=${encodeURIComponent(innerSearch)}`; 
  navigate(path);
}

const wrapperFunction = () => {
  routeChange();
  props.onSubmit(innerSearch)
}

在ProductsNew页面读取参数：

import { useSearchParams } from 'react-router-dom';

const ProductsNew = () => {
  const [searchParams] = useSearchParams();
  // 从URL中获取搜索值，无值时设为空字符串
  const [searchInput, setSearchInput] = useState(searchParams.get('search') || '');
  
  return (
    <input 
      type="text" 
      value={searchInput} 
      onChange={(e) => setSearchInput(e.target.value)}
    />
  );
}

方案二：用localStorage/sessionStorage临时存储 #

跳转前把搜索值存入本地存储，新页面加载时读取，适合不需要在URL中暴露搜索内容的场景。

修改跳转函数：

const routeChange = () =>{ 
  // sessionStorage会在标签页关闭后清空，localStorage长期保存，按需选择
  sessionStorage.setItem('tempSearchKeyword', innerSearch);
  let path = `/ProductsNew`; 
  navigate(path);
}

在ProductsNew页面读取：

const ProductsNew = () => {
  const [searchInput, setSearchInput] = useState('');

  useEffect(() => {
    const savedSearch = sessionStorage.getItem('tempSearchKeyword');
    if (savedSearch) {
      setSearchInput(savedSearch);
      // 可选：读取后清除存储，避免下次进入页面自动填充旧值
      sessionStorage.removeItem('tempSearchKeyword');
    }
  }, []);
  
  return (
    <input 
      type="text" 
      value={searchInput} 
      onChange={(e) => setSearchInput(e.target.value)}
    />
  );
}

方案三：通过全局状态管理（Context/Redux）存储 #

如果项目已经使用全局状态管理，可以把搜索值存在全局state中，跨页面直接读取。这里以React Context为例：

1. 创建搜索上下文：

import { createContext, useContext, useState } from 'react';

const SearchContext = createContext();

export const SearchProvider = ({ children }) => {
  const [globalSearchValue, setGlobalSearchValue] = useState('');
  
  return (
    <SearchContext.Provider value={{ globalSearchValue, setGlobalSearchValue }}>
      {children}
    </SearchContext.Provider>
  );
}

export const useSearch = () => useContext(SearchContext);

2. 在跳转页面设置全局搜索值：

import { useSearch } from './SearchContext';

// ...
const { setGlobalSearchValue } = useSearch();

const routeChange = () =>{ 
  setGlobalSearchValue(innerSearch);
  let path = `/ProductsNew`; 
  navigate(path);
}

3. 在ProductsNew页面读取全局值：

import { useSearch } from './SearchContext';

const ProductsNew = () => {
  const { globalSearchValue } = useSearch();
  const [searchInput, setSearchInput] = useState(globalSearchValue);
  
  return (
    <input 
      type="text" 
      value={searchInput} 
      onChange={(e) => setSearchInput(e.target.value)}
    />
  );
}

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