Javascript – react-router – pass props to handler component

javascriptpropertiesreact-routerreactjs

I have the following structure for my React.js application using React Router:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

I want to pass some properties into the Comments component.

(normally I'd do this like <Comments myprop="value" />)

What's the easiest and right way to do so with React Router?

Best Answer

If you'd rather not write wrappers, I guess you could do this:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

Related Solutions

Javascript – Is JavaScript a pass-by-reference or pass-by-value language

It's interesting in JavaScript. Consider this example:

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);
console.log(obj2.item);

This produces the output:

10
changed
unchanged

If obj1 was not a reference at all, then changing obj1.item would have no effect on the obj1 outside of the function.
If the argument was a proper reference, then everything would have changed. num would be 100, and obj2.item would read "changed". Instead, num stays 10 and obj2.item remains "unchanged".

Instead, the situation is that the item passed in is passed by value. But the item that is passed by value is itself a reference. Technically, this is called call-by-sharing.

In practical terms, this means that if you change the parameter itself (as with num and obj2), that won't affect the item that was fed into the parameter. But if you change the internals of the parameter, that will propagate back up (as with obj1).

Edited for clarification:

JavaScript is pass-by-value. Passing-by-reference and passing a reference are two different things. Pass-by refers to the mechanism for passing a parameter to a function. It's either the value of the variable (pass-by-value) or a pointer (reference) to the location of the variable (pass-by-reference). There's no mechanism within JavaScript to do the latter. It's not as complicated or nuanced as some of these answers try to make it.

Think of a variable as a box that contains information. When you pass it by value, you're just passing a new box with a copy of the information contained in the box. If you change that information within the new box in the function, the original value in the original box is unchanged.

Passing by reference is passing the actual box. If you change what's inside, it will be changed even after the function exits.

In the case of objects, think of the information contained within the box as a map to the locations of other boxes. You can change the contents of those boxes which will be permanent changes after the function exits, but you can't change the contents of the original map.

Assigning a new object to c just put a new map into the new box that is only local to the function. This is also what happened with a.

Javascript – How to pass command line arguments to a Node.js program

Standard Method (no library)

The arguments are stored in process.argv

Here are the node docs on handling command line args:

process.argv is an array containing the command line arguments. The first element will be 'node', the second element will be the name of the JavaScript file. The next elements will be any additional command line arguments.

// print process.argv
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});

This will generate:

$ node process-2.js one two=three four
0: node
1: /Users/mjr/work/node/process-2.js
2: one
3: two=three
4: four

Best Answer

Related Solutions

Javascript – Is JavaScript a pass-by-reference or pass-by-value language

Javascript – How to pass command line arguments to a Node.js program

Standard Method (no library)

Related Topic