从服务器重定向后为 React Router 组件提供状态变量（使用 Redux 进行状态处理）

Question

我正在使用 React 和 Redux 构建客户端应用程序，并使用 Node.js 设置服务器端 API 端点。

对于一项功能，我想在电子邮件中发送一个令牌，然后在单击 link（类似于 website.com/token?email=dave.example@something.com&token=3ad56gyhg）时使用服务器端验证其 token/email API，然后将它们重定向到 React 中的特定页面（使用 React Router）。

我预计节点 API 看起来像这样：

app.get('/token', (req, res, next) => {
    //code here.....
    //goes and checks the email and token code match what is in the database
    if (success) {
         res.redirect('/welcome');
    }
}

一旦我重定向到适当的 React 路由器端点，我如何向任何组件提供与用户相关的 state/props？例如，我可能想在验证他们的令牌后在页面上使用他们的电子邮件地址。

ReactDOM.render(
<Provider store={store}>
    <Router history={hashHistory}>
        <Route component={App}>
            <Route path="/" component={EntryPoint} />
            <Route path="/welcome" component={WelcomeContainer} />
        </Route>
    </Router>
</Provider>,
document.getElementById('root')
);

我是否必须走同构路线并在服务器上创建商店？组件是否需要返回并从服务器获取 'initial state'？

Answer 1

您有一个静态 HTML/CSS/JS 服务器和一个节点 API。在这种情况下，您不能 'template' 您发送给客户端的 HTML。这意味着您只能通过 URL params.

将数据传递给您的 React 应用程序

app.get('/token', (req, res, next) => {
    //code here.....
    //goes and checks the email and token code match what is in the database
    if (success) {
         res.redirect(`/welcome/${encodeURIComponent(email)}`);
    }
}

然后当您的组件加载时，检查查询参数：

ReactDOM.render(
<Provider store={store}>
    <Router history={hashHistory}>
        <Route component={App}>
            <Route path="/" component={EntryPoint} />
            <Route path="/welcome/:email" component={WelcomeContainer} />
        </Route>
    </Router>
</Provider>,
document.getElementById('root')
);

选择：

/token 重定向到您的网络应用程序。
您的 React 应用程序现在获取电子邮件和令牌参数，然后使用电子邮件和令牌参数向 /verify/token 发出 API 请求。
您的应用程序处理 API 请求（returns 一个 success/fail），然后在内部重定向到 /welcome.

这是我通常这样做的方式。关键是要确保当用户点击验证 link 时，他们会被直接带到 webapp。该网络应用程序执行 API 验证业务。

从服务器重定向后为 React Router 组件提供状态变量（使用 Redux 进行状态处理）

Providing a React Router component with state variables after being redirected from the server (using Redux for state-handling)

node.js

react-router

react-redux

选择：