React JS中实现SEO友好动态路由及获取分类ID问题

我明白你遇到的问题——用state传递ID在刷新后会丢失，这是因为路由state只存在于客户端内存中，页面刷新后就清空了。咱们换个靠谱的思路：既然所有分类数据已经存在Redux里，我们可以通过URL里的url字段反向匹配对应的ID，这样不管是首次访问还是刷新页面，都能稳定拿到分类ID。

下面是具体的实现步骤和代码：

1. 修改路由配置 #

把原来的:id参数替换成:categoryUrl，让路由能捕获到SEO友好的URL部分：

// 路由配置文件示例
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Category from './Category';

function AppRouter() {
  return (
    <Router>
      {/* 将原路由的/:id改为/:categoryUrl */}
      <Route path="/category/:categoryUrl" exact component={Category} />
      {/* 其他路由配置... */}
    </Router>
  );
}

export default AppRouter;

2. 更新NavLink的跳转链接 #

直接用分类的url字段生成路径，不需要再通过state传ID：

// 导航栏组件示例
import { NavLink } from 'react-router-dom';
import { useSelector } from 'react-redux';

function Navbar() {
  const categories = useSelector(state => state.categories); // 从Redux获取全量分类数据

  return (
    <nav>
      {categories.map(category => (
        <NavLink 
          key={category.id}
          to={`/category/${category.url}`} // 直接用分类url生成SEO友好路径
          activeClassName="active"
        >
          {category.name}
        </NavLink>
      ))}
    </nav>
  );
}

export default Navbar;

3. 在Category组件中获取对应ID #

通过useParams拿到URL里的categoryUrl，再从Redux的分类数组中匹配出对应的ID：

// Category.js组件示例
import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react';

function Category() {
  const { categoryUrl } = useParams(); // 获取URL中的categoryUrl参数
  const categories = useSelector(state => state.categories); // 从Redux取全量分类
  const [currentCategory, setCurrentCategory] = useState(null);

  useEffect(() => {
    // 根据url匹配对应的分类
    const matchedCategory = categories.find(cat => cat.url === categoryUrl);
    if (matchedCategory) {
      setCurrentCategory(matchedCategory);
      // 这里就可以用matchedCategory.id加载分类详情和关联产品了
      // 比如调用API：fetch(`/api/categories/${matchedCategory.id}/products`)
    } else {
      // 处理分类不存在的情况，比如跳转到404页面或提示用户
      console.log('目标分类不存在');
    }
  }, [categoryUrl, categories]);

  // 处理数据未加载或分类未匹配的状态
  if (!currentCategory) {
    return <div>加载中...</div>; // 或显示404页面
  }

  return (
    <div className="category-page">
      <h1>{currentCategory.name}</h1>
      {/* 这里渲染分类详情和关联产品，用currentCategory.id请求对应数据即可 */}
    </div>
  );
}

export default Category;

额外优化提示 #

如果你的分类数据是异步加载的（比如从MySQL通过API拉取后存入Redux），记得要处理数据未加载完成的状态——比如在组件中先判断categories是否为空，避免find方法报错。

方案为什么靠谱？ #

• URL完全符合SEO要求，搜索引擎更容易抓取；
• 依赖Redux中存储的全量分类数据做匹配，不管页面怎么刷新，只要Redux数据存在就能拿到ID；
• 彻底避免了路由state丢失的问题，所有必要信息都在URL中，直接访问链接也能正常工作。

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