mardi 27 janvier 2015

React Router Undefined Routes Handling


I've noticed a strange behavior in react-router. I have my routes defined like so:



var routes = (
<Route name='app' path='/' handler={Master}>
<DefaultRoute handler={HomePage} />
{/* inject:route */}
<Route name='home' handler={HomePage} />
<Route name='issues' handler={IssuesPage} />
<Route name='security' handler={SecurityPage} />
<Route name='contactUs' handler={ContactUsPage} />
<Route name='docs' handler={DocsPage} />
{/* endinject */}
<Redirect from='/' to='/home' />
<NotFoundRoute handler={HomePage}/>
</Route>
);

Router.run(routes, function (Handler) {
React.render(<Handler />, document.body);
});


in our fork of http://ift.tt/1CdMIVF.


Clicking links in the LeftNav produces expected results. Upon starting gulp, the redirect from / to /home works. What seems weird and undesirable is when I type in something like http://localhost:3000/#/some-undefined-route. As expected, the DefaultRoute handler takes over, and the home page content is visible. HOWEVER, the weird URL remains. What I would expect is for any undefined route to redirect to a pre-defined catch-all. For example, I want http://localhost:3000/#/some-undefined-route to automatically redirect to http://localhost:3000/#/home -- not just show that content.


We're trying to use a mixin with transitionTo() to achieve the desired effect, but I'm still wondering if anybody knows the "right" way to handle this. I also wonder if what I'm seeing is actually the intended react-router behavior. If I'm missing something, I'd love to be enlightened. Cheers!





Aucun commentaire:

Enregistrer un commentaire