使用 ReactJs 进行服务器端重定向

Question

出于 SEO 原因，我尝试对某些页面发出服务器端重定向。我试图解决的问题是我的一些页面将被谷歌索引，所以如果它们被删除或脱机，我们希望将它们重定向到不同的页面而不是显示 404。实现此类重定向的最佳方法是什么在服务器端使用 React Router（express.js）？

Answer 1

您应该有一个定义路由规则的组件，如下所示：

<Router>
 <Switch>
      <Route path='/login' component= {LoginPage}/>
       ......
 </Switch>
<Router>

我想说的是，你应该定义一个包装器来定义重定向网址：

      var redirectToUrl = get url from your logic here;
      var urlComponent = '';
      if ( redirectToUrl )
      {
        urlComponent = <Redirect to={listing}/>;
      }

现在将其添加到您的网址处理页面：

<Router>
    <div>
      {urlComponent}
     <Switch>
          <Route path='/login' component= {LoginPage}/>
           ......
     </Switch>
</div>
    <Router>

Answer 2

const redirect = (a,replace) => {
if(a.params.splat == "page1")
    replace("/page2")
}
<Route path="*" ... onEnter={redirect}/>

在 server.js 中

match(...,(error, redirectLocation, renderProps) => { 
   ... else if (redirectLocation) { res.redirect(302,`${redirectLocation.pathname}${redirectLocation.search}`...);

Answer 3

如果您使用的是 React Router 4，您可以在 Page 组件中添加

Redirect

组件来重定向已失效的页面。 示例： 假设组件尝试从 API 获取对象，但收到离线响应并将其存储在组件状态中：

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';

export default class PageComponent extends Component {

    // ... other stuff

    render() {
        if (this.state.page_offline) {
            return (<Redirect to="/some-page-for-offline-data" />);
        }

        return (...); // normal page render
    }

}