Hitting refresh on nested routes about reactgo

[joshhornby]

On a separate but somewhat related note I am having issues with the render as well - I am trying to create a protected route following something like this http://www.aaron-powell.com/posts/2015-06-08-implementing-security-in-react-with-react-router.html

But my willTransitionTo method is failing with the following error Error: Unhandled aborted transition! Reason: [object Object]

I have found a package that will solve this error https://github.com/ericclemmons/react-router-server-location but it will mean using a more decoupled router like the one above. I can create a separate issue for this is you like?

A simple example can be found here:

https://github.com/ericclemmons/react-router-server-location/blob/master/test/support/express.js

Fixing this would also help close #47

I can also create a test repo showing the issue as well.

[choonkending]

@kkotwal94 the boilerplate was meant to deal with nested routes initially, but I'm not sure it applies in your case. I'll have a look after I finish the protected routes feature #47 and get back to you on that :)

[kkotwal94]

Sure I'm going to continue to debug and figure it out, and thanks.

[kkotwal94]

app.get('*', function (req, res) { 

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

I tried to run this on the server, but I always thought UniversalRender took care of this so I'm a bit perplexed. If I try to run it on the server it yells at me that "import" is a reserved word. Then I tried to install babel and call require("babel/register"); but that didn't really work out either.

export default function UniversalRenderer(alt, routes, html) {
  let render;
  // if it is not a browser
  if (typeof window === 'undefined') {
    // if there is a html string passed in
    // render the markup and inject it into the html string
    if (html) {
      render = (state, url) => {
        const markup = renderToMarkup(alt, routes, state, url);
        return html.replace('CONTENT', markup);
      };
    } else {
      render = (state, url) => {
        return renderToMarkup(alt, routes, state, url);
      };
    }
  } else {
    render = Iso.bootstrap((state, _, container) => {
      alt.bootstrap(state);
      Router.run(routes, Router.HistoryLocation, (Handler) => {
        let node = React.createElement(Handler);
        React.render(node, container);
      });
    });
  }

  return render;
}

Looking at the last else statement we are using history to grab the path anyways, so it should work O_O

[choonkending]

What happens is that webpack and babel compile the code into a function
which is used in routes.js in the server.

Nested routes shoudl work though. I'm currently working on a PR to use
react router 1.0 beta 3 so hopefully most of the issues will be resolved.
Still stuck with fixing it now :)

On Fri, 14 Aug 2015 04:08 Karan Kotwal [email protected] wrote:

app.get('*', function (req, res) {

Router.run(routes, req.path, function (Handler, state) {
    var element = React.createElement(Handler);
    var html = React.renderToString(element);
    res.render('main', { content: html });
});

});

I tried to run this on the server, but I always thought UniversalRender
took care of this so I'm a bit perplexed. If I try to run it on the server
it yells at me that "import" is a reserved word. Then I tried to install
babel and call require("babel/register"); but that didn't really work out
either.

export default function UniversalRenderer(alt, routes, html) {
let render;
// if it is not a browser
if (typeof window === 'undefined') {
// if there is a html string passed in
// render the markup and inject it into the html string
if (html) {
render = (state, url) => {
const markup = renderToMarkup(alt, routes, state, url);
return html.replace('CONTENT', markup);
};
} else {
render = (state, url) => {
return renderToMarkup(alt, routes, state, url);
};
}
} else {
render = Iso.bootstrap((state, _, container) => {
alt.bootstrap(state);
Router.run(routes, Router.HistoryLocation, (Handler) => {
let node = React.createElement(Handler);
React.render(node, container);
});
});
}

return render;
}

Looking at the last else statement we are using history to grab the path
anyways, so it should work O_O

—
Reply to this email directly or view it on GitHub
#50 (comment)
.

[choonkending]

@kkotwal94 Since the protected_routes change, has this still be an issue? I will close it if it has been resolved :)

[kkotwal94]

You can close!

On Tue, Sep 1, 2015 at 4:16 AM, Ken Ding [email protected] wrote:

@kkotwal94 https://github.com/kkotwal94 Since the protected_routes
change, has this still be an issue? I will close it if it has been resolved
:)

—
Reply to this email directly or view it on GitHub
#50 (comment)
.