Question

我正在试图弄清楚如何获得React的帐户激活链接。 Rails API发送帐户激活URL，如下所示：

http://localhost:8080/users/confirm?token=480a476e6be366068dff

我想设置一个React操作，将该标记POST到API，然后组件将呈现“帐户激活”消息。

我目前陷入了两个问题：

如何在浏览器中直接打开上述链接？我收到“无法获取/用户/确认”错误消息。我读到browserHistory应该解决直接调用React URL的问题，但我不确定如何实现它。
如何从链接中捕获令牌？ “/ users / confirm /：token”是正确的方法吗？

routes.jsx：

export default (
  <Route history={browserHistory} path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="/users/login" component={LogInPage} />
    <Route path="/users/register" component={RegisterPage} />
    <Route path="/users/confirm/:token" component={ConfirmPage} />
  </Route>
);

Answer 1

您用于提供反应代码的任何Web服务器都需要处理该路由。因此，如果您要渲染用rails引导反应代码的html页面，请将路由添加到routes.rb，并让它呈现加载您的包的文件。

现在为了让令牌像这样的参数：

mapboxgl

您需要以相同的方式将rails api指向它：

mapboxgl.accessToken = '<your access token here>';

var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: monument,
    zoom: 15
});
let tpl;

    tpl = "text";

  let markerContainer = document.createElement('div');
  markerContainer.innerHTML = tpl;

  // create the popup
  let markerPopup = new mapboxgl.Popup({offset: 25})
    .setHTML("test");

  // create the marker
  new mapboxgl.Marker(markerContainer, {offset:[-25, -25]})
    .setLngLat(monument)
    .setPopup(markerPopup) // sets a popup on this marker
    .addTo(map);

如果您需要使用查询字符串，请在react：

中更新路由

<Route path="/users/confirm/:token" component={ConfirmPage} />

然后在确认页面中，从查询字符串本身获取令牌。你可以通过几种方式实现这一目标。我还没试过，但我相信路由器会为你解析它。在ConfirmPage中，通过以下方式访问它：

http://localhost:8080/users/confirm/480a476e6be366068dff

Answer 2

路由器你有账号吗？在 Material UI ReactJS 中

handleClickSignIn() {
        this.props.history.push("/Register");
    } 
    return(<div><p style={signstyle} > Don't have an account yet?
            < a href onClick={this.handleClickSignIn.bind(this)} >Join Register</a>
                                    </p></div>)

反应帐户激活

2 个答案: