如何在React.js的Reach Router中实现301永久重定向

301永久重定向是HTTP响应级别的状态码，仅客户端运行的React应用本身无法设置该值，Reach Router 默认的<Redirect>组件仅实现客户端侧路由跳转，不会修改HTTP状态码，需结合部署配置或服务端渲染逻辑实现真正的301重定向，分两种场景给出对应方案：

场景1：纯客户端渲染（CSR）部署 #

纯CSR应用所有路由请求首次都会返回200状态码的index.html，无法在React代码层面返回301，直接在部署服务层配置即可，以常用的Nginx部署为例，配置示例如下：

server {
  # 其余配置省略
  location /old-page {
    return 301 /new-url;
  }
  # 多路径重定向可批量添加规则
  location /old-category/* {
    return 301 /new-category/$1;
  }
}

如果是用Vercel、Netlify等平台部署，直接在平台的重定向配置文件中设置对应规则即可。

场景2：服务端渲染（SSR）场景下实现 #

如果你的应用是SSR架构，可以自定义重定向组件配合服务端路由逻辑实现301：

1. 首先封装自定义永久重定向组件：

import { Redirect } from '@reach/router';

// 替代原默认Redirect组件，服务端渲染时会携带301状态码标识
const PermanentRedirect = (props) => {
  // 仅服务端环境下挂载状态码属性
  if (typeof window === 'undefined') {
    props.statusCode = 301;
  }
  return <Redirect {...props} />;
};

2. 在服务端路由匹配逻辑中识别重定向规则，设置响应状态码：
   以Express服务端为例：

import React from 'react';
import { renderToString } from 'react-dom/server';
import { matchServerRoutes } from '@reach/router';
import App from './src/App';

app.get('*', (req, res) => {
  // 匹配服务端路由规则
  const routes = App().props.children;
  const matchedRoute = matchServerRoutes(routes, req.path);

  if (matchedRoute) {
    const { props } = matchedRoute;
    // 匹配到永久重定向规则时返回301
    if (props.statusCode === 301) {
      res.redirect(301, props.to);
      return;
    }
    // 正常渲染SSR页面
    const appHtml = renderToString(<App location={req.path} />);
    res.send(`<html><body>${appHtml}</body></html>`);
    return;
  }
  res.status(404).send('页面不存在');
});

3. 路由配置中使用自定义组件：

<Router>
  <PermanentRedirect from="/old-page" to="/new-url" />
  <Routes path="*" />
</Router>

如果你使用的是基于Reach Router封装的上层框架（如Gatsby），框架本身已提供重定向配置能力，直接在配置重定向规则时指定statusCode为301即可。

内容的提问来源于stack exchange，提问作者dineshrp-virtusa