Is var { Route, Redirect, RouteHandler, Link } = Router; valid in Javascript? [duplicate]

Question

What does this mean in Javascript ? I found this in react-router examples

var { Route, Redirect, RouteHandler, Link } = Router;

I get the following error when it is run through browserify.

"Uncaught SyntaxError: Unexpected token {"

https://github.com/rackt/react-router/blob/master/examples/dynamic-segments/app.js

Esprima also gives the same error: http://esprima.org/demo/validate.html

Answer 1

Apparently it's called a destructuring assignment.

From another post here:

{x, y} = foo;

is equivalent to

x = foo.x;
y = foo.y;

This is part of ECMAScript 6, and Facebook's JSX transform has an optional flag to enable transpiling select ES6 syntax (including destructuring) to ES5-compatible syntax, which react-router uses.

Here is the original post with answer by Mike Christensen:

What do {curly braces} around javascript variable name mean

Answer 2

It worked after changing my code to

var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

More information about this can be found here: http://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx