URL 使用服务器端 React 和 React Router v4 在 Redux Action 中重定向

Question

很长一段时间以来，我一直在努力找出处理服务器端呈现的 React 应用程序重定向的最佳方法，使用 react-router v4 和 redux。

我的应用程序从 API 获取数据 - 有时 API 的响应方式让我需要自动将用户重定向到另一个 URL。

Answer 1

如果 API 以导致我需要重定向的方式响应，我将用户应该被定向到的路径存储在 redux 存储中。（我的 API returns 一个带有 "redirect" 变量的错误对象我可以在我的路由文件中查找以作为重定向路径插入到商店中）。

重要的是，这只是将路径存储在 redux 存储中。

case (typeof error["redirect"] !== "undefined" && error["redirect"] !== null): {
    dispatch({
        type: RENDER_REDIRECT,
        payload: routes[error["redirect"]]
    });
    break;
}

我有一个名为 "RenderRedirect" 的组件，该组件始终在主应用程序中呈现，但如果 this.props 显示重定向为 "null" 并且 nextProps 重定向为 !空。

这意味着重定向已被触发。

它使用 history.push 更改 URL，然后使用另一个操作从商店中清除重定向。

这特别有效，因为我不必担心服务器端呈现错误，因为这种情况只会发生在客户端。

任何时候我需要触发重定向，我都可以使用路径作为有效负载轻松分派上述操作。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from "react-router-dom";
import { clearRedirect } from '../../../actions';

class RenderRedirect extends Component {

    componentWillReceiveProps(nextProps) {
        // Detect redirect, perform redirect, clear redirect
        const { redirect, history, clearRedirectAction } = this.props;

        // Detect redirect
        if(redirect === null && nextProps.redirect !== null) {
            history.push(nextProps.redirect);
            clearRedirectAction();
        }
    }

    render() {
        const { redirect } = this.props;

        if (redirect !== null) {
            return (
                <div>
                    <p className={"profile-instructions"}>Redirecting...</p>
                </div>
            )
        } else {
            return null;
        }
    }
}

const mapStateToProps = (state) => ({
    redirect: state.redirect
})

const mapDispatchToProps = (dispatch) => ({
    clearRedirectAction: () => dispatch(clearRedirect())
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RenderRedirect));

URL 使用服务器端 React 和 React Router v4 在 Redux Action 中重定向

URL Redirect In Redux Action With Server-Side React & React Router v4

redirect

reactjs

redux

server-side-rendering

react-router-v4