面试题：React Router服务端渲染与SEO优化的深度结合

元数据（meta）设置

动态设置meta标签：

在React Router的路由组件中，可以通过react - helmet库来动态设置meta标签。这个库能让我们在组件渲染时更新文档的头部信息。
首先安装react - helmet：

npm install react - helmet

然后在路由组件中使用，例如：

import React from'react';
import { Helmet } from'react - helmet';

const MyPage = () => {
  return (
    <div>
      <Helmet>
        <title>My Page Title</title>
        <meta name="description" content="This is a description for my page." />
      </Helmet>
      <h1>My Page Content</h1>
    </div>
  );
};

export default MyPage;

基于路由参数设置meta：如果路由带有参数，比如文章详情页根据文章ID显示不同内容，也可以根据参数动态设置meta。

import React from'react';
import { Helmet } from'react - helmet';
import { useParams } from'react - router - dom';

const ArticlePage = () => {
  const { articleId } = useParams();
  // 假设这里根据articleId从API获取文章标题和描述
  const articleTitle = 'Sample Article Title';
  const articleDescription = 'Sample Article Description';
  return (
    <div>
      <Helmet>
        <title>{articleTitle}</title>
        <meta name="description" content={articleDescription} />
      </Helmet>
      <h1>{articleTitle}</h1>
      <p>{articleDescription}</p>
    </div>
  );
};

export default ArticlePage;

预渲染内容处理

静态站点生成（SSG）：
- 使用Next.js等框架可以实现静态站点生成。Next.js会在构建时预渲染页面，生成HTML文件。
- 例如，创建一个Next.js项目并定义一个页面：
```
npx create - next - app my - app
cd my - app
```
- 在pages/index.js中：
```
import React from'react';

const HomePage = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>This is a pre - rendered home page.</p>
    </div>
  );
};

export default HomePage;
```
- Next.js会在构建时生成index.html，并且在页面加载时，内容已经存在，有利于SEO。

服务器端渲染（SSR）中的数据预取：

在React Router的SSR场景下，可以在渲染前预取数据。例如，使用react - query库。
安装react - query：

npm install react - query

在组件中使用：

import React from'react';
import { useQuery } from'react - query';
import axios from 'axios';

const MyDataComponent = () => {
  const { data, isLoading } = useQuery('myData', async () => {
    const response = await axios.get('/api/data');
    return response.data;
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>My Data</h1>
      <p>{data}</p>
    </div>
  );
};

export default MyDataComponent;

在服务端渲染时，可以先预取数据，然后将数据传递给组件，这样爬虫访问时能获取完整内容。

爬虫友好性

确保可访问性：

保证路由配置清晰，没有复杂的客户端路由逻辑使得爬虫无法解析。例如，避免使用仅在客户端触发的动态路由切换，而应使用服务器端可识别的标准路由。
在React Router中，使用<Route>组件配置路由时，确保路径简洁明了，如：

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react - router - dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
};

export default App;

处理重定向：

合理处理重定向，确保爬虫能正确跟随重定向到最终页面。在React Router中，可以使用<Navigate>组件进行重定向。
例如：

import React from'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from'react - router - dom';
import OldPage from './OldPage';
import NewPage from './NewPage';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/old - page" element={<Navigate to="/new - page" replace />} />
        <Route path="/new - page" element={<NewPage />} />
      </Routes>
    </Router>
  );
};

export default App;

这里replace属性确保重定向后不会在历史记录中留下旧页面的记录，避免爬虫陷入重定向循环。

面试题：React Router服务端渲染与SEO优化的深度结合

知识考点

面试题答案

元数据（meta）设置

预渲染内容处理

爬虫友好性