How to access router or route progmatically?

[cranesandcaff]

What's the best way to access the router from the client? Specifically I want to transition users on log in or log out. Should I add the router as a property on the alt container?

[masqita]

The users.jsx file has an example on how to transition to another route (it is passed down the context):

  _showProfile(seed: string) {
    this.context.router
      .transitionTo('profile', {seed});
  }

When it gets hairy is when you want to shield pages with a login screen (or the whole app). This is a react-router issue that has been discussed on remix-run/react-router#590

Basically, because this implementation using Alt (but the same applies to Flummox and MartyJS for example) uses a flux instance (more or less a must if you want to have proper isomorphic rendering) and not a singleton, you need to have access to the instance in the static method "willTransitionTo". Some options are given on that github issue page, but they all have serious issues (not to mention the code just feels and is ugly).

I've resorted to a conditional render on the App component (and have the app component listen to loginChange):

    if (props.user) {
      appComponent = <RouteHandler {...props} />;
    } else {
      appComponent = <Login {...props} />;
    }

This however brings up another issue because of the way this boilerplate fires off actions on componentWillMount/componentDidMount. React will throw errors that a new dispatch can't happen within a previous dispatch.

It took me a while to find a solution, but this works (based on feedback in Fluxxor issue BinaryMuse/fluxxor#92), in main.js:

import React from 'react/addons';
…
(async () => {
  // Init alt instance
  let flux = new Flux();
  let oldDispatch = flux.dispatcher.dispatch.bind(flux.dispatcher);
  flux.dispatcher.dispatch = (action) => {
    React.addons.batchedUpdates(() => {
      oldDispatch(action);
    });
  };
…

I'm not completely happy with my solution, but at least it works and it works both on the server and on the client.

If someone can chime in with a login solution that redirects a page to /login and after a successful login back to the originating route and get that working both on the serverside and the clientside without a forked react-router and ugly workaround, please do. This is a fairly common case with SPA (appwide authentication or authenticated routes) and a clean solution would be very welcome.

[cranesandcaff]

My solution is to make two routers, a public and an authed router and then dynamically set them. I'm not sure how that will work with the cache though.

[iam4x]

I'm waiting react-router new API, things will be much easier.

For now, I'm doing the same thing @masqita

[lancetw]

Hi @iam4x, I have an isomorphic auth flow issue/question with react-router for now.

I created require-auth.jsx to protect pages, then run with DEBUG=dev NODE_ENV=production node --harmony server/index.js, the auth flow is working.

But if I disabled Javascript, it will not working on server side, just hang on response. (should redirect to log in page.)

It seems like router.jsx "Allow transition with willTransitionTo to redirect request" is not working well.

[iam4x]

@lancetw Can I have more code as example? I suspect that transitionTo is called after async operations.

[lancetw]

Hi @iam4x, the auth-flow is an example from react-router.
https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

You could use this branch, I add a "protected" page and links, the code just warps like

requireAuth(class Protected extends React.Component { ...

If you click a link to protected page, it will be redirected to "login-info" page, but only when Javascript enable on client browser.)

[lancetw]

I test again (local), strangely, after disable Javascript, It's only work well on Chrome browser,
Firefox, Safari, IE will hang.

If I put site on remote server, request a protected page then wait redirect,
all browser will hang just one minute.

[lancetw]

Finally, flummox doc example solved my question,
now willTransitionTo is working well on server side.

check this: https://github.com/acdlite/flummox/blob/master/docs/src/server/appView.js

[iam4x]

@lancetw Nice, it would be great as addition on the boilerplate. Can you make me a PR?

[lancetw]

@iam4x I send the PR. :)
BTW, I think this great isomorphic Javascript demo need to work well when client disabled Javascript.

[iam4x]

Now things should be easier with new react-router beta, I've updated the boilerplate and the example of @lancetw will be improved soon.