Allow `<Link>` to omit active params.

[machty]

Presently you have to provide every single param for a target route within Link, but particularly when you're writing links inside deeply nested routes, this becomes needlessly repetitive as you start having to repeat the params of already-active parent routes, and to my understanding (and per convos w @rpflorence) I don't think the argument for refactorability applies in this case.

So why don't we default omitted params to whatever's in props.params rather than error out?

[ryanflorence]

Gonna drop some code just for reference...

If you have a route config like this:

<Route path="course/:courseId" handler={Course}>
  <Route path="course/:courseId/dashboard" name="dashboard"/>
  <Route path="course/:courseId/pages" name="pages"/>
  <Route path="course/:courseId/assignments" name="assignments"/>
  <Route path="course/:courseId/quizzes" name="quizzes"/>
  <!-- x20 more routes -->
</Route>

Then your component would look something like:

var Course = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to="dashboard" courseId={this.props.params.courseId}>Dashboard</Link></li>
          <li><Link to="pages" courseId={this.props.params.courseId}>Pages</Link></li>
          <li><Link to="assignments" courseId={this.props.params.courseId}>Assignments</Link></li>
          <li><Link to="quizzes" courseId={this.props.params.courseId}>Quizzes</Link></li>
          // ... etc.
        </ul>
      </div>
    );
  }
});

If we do what @machty proposes:

var Course = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to="dashboard">Dashboard</Link></li>
          <li><Link to="pages">Pages</Link></li>
          <li><Link to="assignments">Assignments</Link></li>
          <li><Link to="quizzes">Quizzes</Link></li>
          // ... etc.
        </ul>
      </div>
    );
  }
});

I find this appealing, but I also like the general idea of being explicit about things, even if it requires a bit more typing.

We also might be able to make an <AutoParamLink/> (needs a better name ofc) that does this for people wanting it.

[ryanflorence]

Also, when Route is more extensible, I wouldn't mind an <ContextualRoute> that inherits the path of its parent, similar brevity win but in your route config.

[mjackson]

Ah, yeah. This would be nice. React already does something similar with the className and style props when using transferPropsTo. We could do the same thing with params. Since we force child routes to have at least all the params of their parents, this coupling already exists. This change would just make it more convenient, albeit at the cost of being explicit.

Side note: @petehunt says that transferPropsTo is going away sometime in the future because it introduces coupling between components. See https://github.com/reactjs/react-future/blob/master/01%20-%20Core/08%20-%20Transferring%20Props.js

[ryanflorence]

but whats wrong with purposefully and explicitly coupling things?

[mjackson]

Nothing. As I said, the coupling already exists. This just makes it more convenient to use with links.

[petehunt]

fwiw there will be a migration path off of transferPropsTo() that will be very straightforward, but I just wanted to flag it

[nutic]

Maybe revert is too quick decision? It would be nice to have such an option. Providing params explicitly forces me to fix particular context for my nested component and closes the door to reusing components in different context's (that's what React if for).

[andreigabreanu]

I agree. Not having it explicit looks much better. React is already pretty verbose, no need to add to it unless it improves something (it doesn't in this case).

Imagine this scenario:

React.createElement(Route, {handler: AppComponent},
  React.createElement(Route, {name: 'base', path: '/'},
    React.createElement(Route, {name: 'locale', path: ':locale'},
      React.createElement(Route, {name: 'home', path: 'home', handler: HomepageComponent}),
      React.createElement(Route, {name: 'another', path: 'another', handler: AnotherComponent}),

and then in a menu or whatever i want to do something like <Link to="home"> from "/en/another

I don't think I see any advantage of
<Link to="home" locale={this.props.params.locale}> over this. If i want to overwrite the locale, I'll specify it. Otherwise, use the current params already present.