提问人：MoPkoBot 提问时间：1/30/2018 更新时间：10/27/2023 访问量：9044
使用 ReactJs 进行服务器端重定向
Server side redirect with ReactJs
问：
出于 SEO 原因，我正在尝试为某些页面发布服务器端重定向。我试图解决的问题是，我的一些页面将被谷歌索引，因此，如果它们被删除或离线，我们希望将它们重定向到不同的页面，而不是显示 404。在服务器端使用 React Router 实现此类重定向的最佳方法是什么（express.js）？
答：
0赞
learner
1/30/2018
#1
您应该有一个定义路由规则的组件，如下所示：
<Router>
<Switch>
<Route path='/login' component= {LoginPage}/>
......
</Switch>
<Router>
我要说的是，您应该定义一个包装器来定义重定向 URL：
var redirectToUrl = get url from your logic here;
var urlComponent = '';
if ( redirectToUrl )
{
urlComponent = <Redirect to={listing}/>;
}
现在将其添加到您的 url 处理页面：
<Router>
<div>
{urlComponent}
<Switch>
<Route path='/login' component= {LoginPage}/>
......
</Switch>
</div>
<Router>
评论
0赞
Gasim
1/30/2018
但这不是 RR4 的做事方式。
-1赞
Gasim
1/30/2018
#2
如果你使用的是 React Router 4，tou 可以在你的 Page 组件中添加组件来重定向失效的页面。例：假设组件尝试从 API 获取对象，但得到了离线响应并将其存储在组件状态：Redirect
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
}
}
评论
0赞
MoPkoBot
1/31/2018
我正在使用 React Router v3，我假设这不适用于版本 3，对吗？
0赞
Gasim
1/31/2018
不，不会。也许这可能会有所帮助：stackoverflow.com/questions/35849884/......
0赞
Yousef Irman
7/10/2019
#3
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}`...);
评论