v6升级后SEO优化实践

React Router v6升级后，SEO优化成为我们关注的重点。v6版本移除了<Switch>组件，改用<Routes>，并引入了更灵活的路由匹配机制。在升级过程中，我们发现原有的SEO策略需要重新审视。

首先，在v6中，我们需要确保每个路由组件都能正确处理<meta>标签。可以使用react-helmet库来动态设置页面标题和元描述：

import { Helmet } from 'react-helmet';

function ProductPage({ productId }) {
  return (
    <div>
      <Helmet>
        <title>产品详情 - {productId}</title>
        <meta name="description" content="查看产品详细信息" />
      </Helmet>
      <h1>产品页面</h1>
    </div>
  );
}

其次，v6的useNavigate和useParams钩子需要配合服务端渲染使用。在服务端渲染时，确保路由参数能够正确传递：

const router = createBrowserRouter([
  {
    path: '/products/:id',
    element: <ProductPage />
  }
]);

最后，针对搜索引擎的爬虫，我们需要在robots.txt中配置正确的路由规则，并确保所有页面都有唯一的URL结构。通过v6的动态导入和代码分割，我们能够更好地控制页面加载的SEO友好性。

这些实践帮助我们在升级后保持了良好的搜索引擎可见性。