React account activation

Question

I'm trying to figure out how to get the account activation link to React. The Rails API sends an account activation URL as follows:

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

I would like to setup a React action that POSTs that token to the API and then a component will render a "account activated" message.

I am currently stuck on 2 issues:

How to directly open the above link in the browser? I'm getting a "Cannot GET /users/confirm" error message. I read that browserHistory is supposed to solve the problem of directly calling React URLs but I'm not sure how to implement it.
How to capture the token from the link? Is "/users/confirm/:token" the correct approach?

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>
);

score 2 · Answer 1 · answered May 05 '17 at 12:48

2

Whatever web server you're using to serve the react code needs to handle that route too. So if you're rendering the html page that bootstraps the react code with rails, add the route to the routes.rb, and have it render the file that loads your bundle.

Now in order to have the token come as a parameter like that:

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

You'll need to have the rails api direct to it in the same way:

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

If you need to use the query string, update the route in react:

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

Then in the confirm page, get the token from the query string itself. You can do this in a few ways. I haven't tried it, but I believe react router parses it for you. In the ConfirmPage, access it by:

this.props.location.query.token

answered May 05 '17 at 12:48

agmcleod

13,321
13
57
96

Thanks but I'm not sure how to create an html file that bootstraps react and rails. My Rails server is in API only mode, it doesn't render any views, only JSONs.Would you please provide more details on that? – baerlein May 05 '17 at 15:34
How are you serving the front end? Webpack-dev-server? It has an option to handle arbitrary URLs: http://stackoverflow.com/questions/31945763/how-to-tell-webpack-dev-server-to-serve-index-html-for-any-route – agmcleod May 05 '17 at 18:16
Yes, I'm using webpack-dev-server. By specifying a rewrite in historyApiFallback, I can have the confirm url go to a static confirm.html, but how can I go from there to the ConfirmPage component? – baerlein May 06 '17 at 14:58
You shouldn't need a re-write for this problem. – agmcleod May 08 '17 at 12:58

score 0 · Answer 2 · answered Mar 25 '21 at 11:48

Router for Did You have an account? in 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>)

React account activation

2 Answers2