blocks|key|1398081|text|更新|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398082|自从新版本发布以来，可以直接通过Route组件传递道具，而无需使用包装器。例如，由道具。|offset|length|style|CODE|1398083|组件：|BOLD|1398084|class+Greeting+extends+React.Component+{
++render()+{
++++const+{text,+match:+{params}}+=+this.props;

++++const+{name}+=+params;

++++return+(
++++++<React.Fragment>
++++++++<h1>Greeting+page</h1>
++++++++<p>
++++++++++{text}+{name}
++++++++</p>
++++++</React.Fragment>
++++);
++}
}|code-block|syntax|javascript|1398085|使用：|1398086|<Route+path="/greeting/:name"+render={(props)+=>+<Greeting+text="Hello,+"+{...props}+/>}+/>|1398087|Codesandbox示例|1398088|旧版本|1398089|我喜欢的方法是包装Comments组件并将包装器作为路由处理程序传递。|1398090|下面是应用更改的示例：|1398091|var+Dashboard+=+require('./Dashboard');
var+Comments+=+require('./Comments');

var+CommentsWrapper+=+React.createClass({
++render:+function+()+{
++++return+(
++++++<Comments+myprop="myvalue"/>
++++);
++}
});

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

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

ReactRouter.run(routes,+function+(Handler)+{
++React.render(<Handler/>,+document.body);
});|1398092|entityMap|0|LINK|mutability|MUTABLE|url|https://reacttraining.com/react-router/web/api/Route/render-func|1|https://codesandbox.io/s/z3ovqpmp44^0|0|G|5|15|2|0|0|0|3|0|0|0|3|0|0|0|D|1|0|0|9|8|0|0|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|H|3|I|5|6|7|1K|8|@$D|1L|E|1M|F|J]]|9|@]|A|$]]|$1|K|3|L|5|M|7|1N|8|@]|9|@]|A|$N|O]]|$1|P|3|Q|5|6|7|1O|8|@$D|1P|E|1Q|F|J]]|9|@]|A|$]]|$1|R|3|S|5|M|7|1R|8|@]|9|@]|A|$N|O]]|$1|T|3|U|5|6|7|1S|8|@]|9|@$D|1T|E|1U|1|1V]]|A|$]]|$1|V|3|W|5|6|7|1W|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1X|8|@$D|1Y|E|1Z|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|20|8|@]|9|@]|A|$]]|$1|11|3|12|5|M|7|21|8|@]|9|@]|A|$N|O]]|$1|13|3|-4|5|6|7|22|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|1A]]|1B|$5|16|17|18|A|$19|1C]]]]

<h2>UPDATE</h2>

<p>Since new release, it's possible to pass props directly via the <code>Route</code> component, without using a Wrapper. For example, by <a href="https://reacttraining.com/react-router/web/api/Route/render-func" rel="noreferrer">using <code>render</code> prop</a>.</p>

<p><strong>Component:</strong></p>

<pre><code>class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      &lt;React.Fragment&gt;
        &lt;h1&gt;Greeting page&lt;/h1&gt;
        &lt;p&gt;
          {text} {name}
        &lt;/p&gt;
      &lt;/React.Fragment&gt;
    );
  }
}
</code></pre>

<p><strong>Usage:</strong></p>

<pre><code>&lt;Route path="/greeting/:name" render={(props) =&gt; &lt;Greeting text="Hello, " {...props} /&gt;} /&gt;
</code></pre>

<p><a href="https://codesandbox.io/s/z3ovqpmp44" rel="noreferrer">Codesandbox Example</a></p>

<hr>

<h2>OLD VERSION</h2>

<p>My preferred way is wrap the <code>Comments</code> component and pass the wrapper as a route handler.</p>

<p>This is your example with changes applied:</p>

<pre><code>var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var CommentsWrapper = React.createClass({
  render: function () {
    return (
      &lt;Comments myprop="myvalue"/&gt;
    );
  }
});

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

var routes = (
  &lt;Route path="/" handler={Index}&gt;
    &lt;Route path="comments" handler={CommentsWrapper}/&gt;
    &lt;DefaultRoute handler={Dashboard}/&gt;
  &lt;/Route&gt;
);

ReactRouter.run(routes, function (Handler) {
  React.render(&lt;Handler/&gt;, document.body);
});
</code></pre>


blocks|key|62608|text|您还可以使用RouteHandler混音来避免包装器组件，并且更容易地将父级的状态作为支持传递下去：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|62609|var+Dashboard+=+require('./Dashboard');
var+Comments+=+require('./Comments');
var+RouteHandler+=+require('react-router/modules/mixins/RouteHandler');

var+Index+=+React.createClass({
++++++mixins:+[RouteHandler],
++++++render:+function+()+{
++++++++var+handler+=+this.getRouteHandler({+myProp:+'value'});
++++++++return+(
++++++++++++<div>
++++++++++++++++<header>Some+header</header>
++++++++++++++++{handler}
+++++++++++</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);
});|code-block|syntax|javascript|62610|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could also use the RouteHandler mixin to avoid the wrapper component and more easily pass down the parent's state as props:</p>

<pre><code>var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Index = React.createClass({
      mixins: [RouteHandler],
      render: function () {
        var handler = this.getRouteHandler({ myProp: 'value'});
        return (
            &lt;div&gt;
                &lt;header&gt;Some header&lt;/header&gt;
                {handler}
           &lt;/div&gt;
        );
  }
});

var routes = (
  &lt;Route path="/" handler={Index}&gt;
    &lt;Route path="comments" handler={Comments}/&gt;
    &lt;DefaultRoute handler={Dashboard}/&gt;
  &lt;/Route&gt;
);

ReactRouter.run(routes, function (Handler) {
  React.render(&lt;Handler/&gt;, document.body);
});
</code></pre>


blocks|key|1878245|text|您可以像这样通过<RouterHandler/>传递道具：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1878246|var+Dashboard+=+require('./Dashboard');
var+Comments+=+require('./Comments');

var+Index+=+React.createClass({
++render:+function+()+{
++++var+props+=+this.props;+//+or+possibly+this.state
++++return+(
++++++++<div>
++++++++++++<header>Some+header</header>
++++++++++++<RouteHandler+{...props}+/>
++++++++</div>
++++);
++}
});|code-block|syntax|javascript|1878247|这样做的缺点是你不分青红皂白地通过道具。因此，Comments可能最终会收到一些道具，这些道具实际上是为不同的组件准备的，这取决于您的路由配置。这并不是什么大问题，因为props是不可变的，但是如果两个不同的组件需要一个名为foo但具有不同值的道具，这可能会有问题。|1878248|entityMap^0|8|G|0|0|N|8|2C|5|34|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>You can pass in props via the <code>&lt;RouterHandler/&gt;</code> like this:</p>

<pre><code>var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    var props = this.props; // or possibly this.state
    return (
        &lt;div&gt;
            &lt;header&gt;Some header&lt;/header&gt;
            &lt;RouteHandler {...props} /&gt;
        &lt;/div&gt;
    );
  }
});
</code></pre>

<p>The downside of this is you are passing props indiscriminately. So <code>Comments</code> may end up receiving props that are really intended for a different component depending on your routes configuration. It's not a huge deal since <code>props</code> is immutable, but this can be problematic if two different components are expecting a prop named <code>foo</code> but with different values.</p>


blocks|key|1398143|text|只是对科奇答案的跟进。很容易抽象出组件的包装：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398144|var+React+=+require('react');

var+wrapComponent+=+function(Component,+props)+{
++return+React.createClass({
++++render:+function()+{
++++++return+React.createElement(Component,+props);
++++}
++});
};

<Route+path="comments"+handler={wrapComponent(Comments,+{myprop:+value})}/>|code-block|syntax|javascript|1398145|我还没有测试这个解决方案，所以任何反馈都是很重要的。|1398146|需要注意的是，使用此方法，通过路由器发送的任何道具(如params)都会被覆盖/删除。|1398147|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Just a  follow-up to ColCh's answer. It is quite easy to abstract the wrapping of a component:</p>

<pre><code>var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

&lt;Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/&gt;
</code></pre>

<p>I haven't tested this solution yet so any feedback is important.</p>

<p>It's important to note that with this method, any props sent via the Router (such as params) get overwritten / removed.</p>


blocks|key|1878317|text|您可以通过将道具传递给<RouteHandler>+(在0.13.x中)或在v1.0中传递路由组件；|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1878318|//+v0.13.x
<RouteHandler/>
<RouteHandler+someExtraProp={something}/>

//+v1.0
{this.props.children}
{React.cloneElement(this.props.children,+{someExtraProp:+something+})}|code-block|syntax|javascript|1878319|(来自https://github.com/rackt/react-router/releases/tag/v1.0.0的升级指南)|1878320|所有子处理程序都将收到相同的道具集--这可能是有用的，也可能不取决于具体情况。|1878321|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rackt/react-router/releases/tag/v1.0.0^0|B|E|0|0|3|1L|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>You can pass props by passing them to <code>&lt;RouteHandler&gt;</code> (in v0.13.x) or the Route component itself in v1.0;</p>

<pre><code>// v0.13.x
&lt;RouteHandler/&gt;
&lt;RouteHandler someExtraProp={something}/&gt;

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}
</code></pre>

<p>(from the upgrade guide at <a href="https://github.com/rackt/react-router/releases/tag/v1.0.0">https://github.com/rackt/react-router/releases/tag/v1.0.0</a>)</p>

<p>All child handlers will receive the same set of props - this may be useful or not depending on the circumstance.</p>


blocks|key|1878330|text|如果您不想编写包装器，我想您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878331|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}/>
);|code-block|syntax|javascript|1878332|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you'd rather not write wrappers, I guess you could do this:</p>

<pre><code>class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      &lt;h1&gt;
        Index - {this.props.route.foo}
      &lt;/h1&gt;
    );
  }
}

var routes = (
  &lt;Route path="/" foo="bar" component={Index}/&gt;
);
</code></pre>


blocks|key|1398178|text|您还可以将es6和无状态函数组合起来，以获得更干净的结果：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1398179|import+Dashboard+from+'./Dashboard';
import+Comments+from+'./Comments';

let+dashboardWrapper+=+()+=>+<Dashboard+{...props}+/>,
++++commentsWrapper+=+()+=>+<Comments+{...props}+/>,
++++index+=+()+=>+<div>
++++++++<header>Some+header</header>
++++++++<RouteHandler+/>
++++++++{this.props.children}
++++</div>;

routes+=+{
++++component:+index,
++++path:+'/',
++++childRoutes:+[
++++++{
++++++++path:+'comments',
++++++++component:+dashboardWrapper
++++++},+{
++++++++path:+'dashboard',
++++++++component:+commentsWrapper
++++++}
++++]
}|code-block|syntax|javascript|1398180|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/reusable-components.html#stateless-functions^0|9|5|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can also combine es6 and <a href="https://facebook.github.io/react/docs/reusable-components.html#stateless-functions" rel="nofollow noreferrer">stateless functions</a> to get a much cleaner result:</p>

<pre><code>import Dashboard from './Dashboard';
import Comments from './Comments';

let dashboardWrapper = () =&gt; &lt;Dashboard {...props} /&gt;,
    commentsWrapper = () =&gt; &lt;Comments {...props} /&gt;,
    index = () =&gt; &lt;div&gt;
        &lt;header&gt;Some header&lt;/header&gt;
        &lt;RouteHandler /&gt;
        {this.props.children}
    &lt;/div&gt;;

routes = {
    component: index,
    path: '/',
    childRoutes: [
      {
        path: 'comments',
        component: dashboardWrapper
      }, {
        path: 'dashboard',
        component: commentsWrapper
      }
    ]
}
</code></pre>


blocks|key|62759|text|在1.0和2.0中，您可以使用Router的Router支柱来指定如何准确地创建目标元素。文献来源|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|62760|function+createWithDefaultProps(Component,+props)+{
++++return+<Component+{...props}+myprop="value"+/>;
}

//+and+then++++
<Router+createElement={createWithDefaultProps}>
++++...
</Router>|code-block|syntax|javascript|62761|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/rackt/react-router/blob/master/docs/API.md#createelementcomponent-props^0|F|6|M|6|19|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>In 1.0 and 2.0 you can use <code>createElement</code> prop of <code>Router</code> to specify how exactly to create your target element. <a href="https://github.com/rackt/react-router/blob/master/docs/API.md#createelementcomponent-props">Documentation source</a></p>

<pre><code>function createWithDefaultProps(Component, props) {
    return &lt;Component {...props} myprop="value" /&gt;;
}

// and then    
&lt;Router createElement={createWithDefaultProps}&gt;
    ...
&lt;/Router&gt;
</code></pre>


blocks|key|1878361|text|用无状态函数组件包装它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878362|<Router>
++<Route+
++++path='/'+
++++component={({children})+=>+
++++++<MyComponent+myProp={'myVal'}>{children}</MyComponent/>
++++}/>
</Router>|code-block|syntax|javascript|1878363|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Wrap it with a stateless function component:</p>

<pre><code>&lt;Router&gt;
  &lt;Route 
    path='/' 
    component={({children}) =&gt; 
      &lt;MyComponent myProp={'myVal'}&gt;{children}&lt;/MyComponent/&gt;
    }/&gt;
&lt;/Router&gt;
</code></pre>


blocks|key|1391763|text|对于react路由器2.5.2，解决方案非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1391764|++++//someConponent
...
render:function(){
++return+(
++++<h1>This+is+the+parent+component+who+pass+the+prop+to+this.props.children</h1>
++++{this.props.children+&&+React.cloneElement(this.props.children,{myProp:'value'})}
++)
}
...|code-block|syntax|javascript|1391765|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>for the react-router 2.5.2,the solution is so easy:</p>

<pre><code>    //someConponent
...
render:function(){
  return (
    &lt;h1&gt;This is the parent component who pass the prop to this.props.children&lt;/h1&gt;
    {this.props.children &amp;&amp; React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...
</code></pre>


blocks|key|1878453|text|使用ES6，您只需将组件包装器内联：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878454|<Route+path="/"+component={()+=>+<App+myProp={someValue}/>}+>|offset|length|style|CODE|1878455|如果你需要通过孩子：|1878456|<Route+path="/"+component={(props)+=>+<App+myProp={someValue}>{props.children}</App>}+>|1878457|entityMap^0|0|0|1P|0|0|0|2F|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|M|$]]

<p>Using ES6 you can just make component wrappers inline:</p>

<p><code>&lt;Route path="/" component={() =&gt; &lt;App myProp={someValue}/&gt;} &gt;</code></p>

<p>If you need to pass children:</p>

<p><code>&lt;Route path="/" component={(props) =&gt; &lt;App myProp={someValue}&gt;{props.children}&lt;/App&gt;} &gt;</code></p>


blocks|key|1391802|text|从古兰地在已接受的回复中的评论复制：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1391803|<Route+path="comments"+component={()+=>+(<Comments+myProp="value"+/>)}/>|code-block|syntax|javascript|1391804|在我看来，这是最优雅的解决办法。它起作用了。帮了我。|1391805|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/183544/ciantic^0|1|3|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Copying from the comments by <a href="https://stackoverflow.com/users/183544/ciantic">ciantic</a> in the accepted response: </p>

<pre><code>&lt;Route path="comments" component={() =&gt; (&lt;Comments myProp="value" /&gt;)}/&gt;
</code></pre>

<p>This is the most graceful solution in my opinion. It works. Helped me.</p>


blocks|key|1398299|text|React路由器v4α|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1398300|现在有了一种新的方法，可以做到这一点，尽管非常类似于以前的方法。|1398301|import+{+Match,+Link,+Miss+}+from+'react-router';
import+Homepage+from+'./containers/Homepage';

const+route+=+{
++++exactly:+true,
++++pattern:+'/',
++++title:+`${siteTitle}+-+homepage`,
++++component:+Homepage
++}

<Match+{+...route+}+render={(props)+=>+<route.component+{...props}+/>}+/>|code-block|syntax|javascript|1398302|这只适用于alpha版本，并且在v4+alpha版本之后被删除。在v4最新，是再次，与路径和确切的道具。|1398303|反应-乐高+--一个示例应用程序，包含执行此在routes.js上的反应路由器-4分支操作的代码。|offset|length|1398304|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/peter-mouland/react-lego|1|https://github.com/peter-mouland/react-lego/blob/react-router-4/src/app/routes.js^0|0|0|0|0|0|5|0|M|L|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]|$M|16|N|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<h1>React-router v4 <em>alpha</em></h1>

<p>now there is a new way, to do this, although very similar to the previous method.</p>

<pre><code>import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    exactly: true,
    pattern: '/',
    title: `${siteTitle} - homepage`,
    component: Homepage
  }

&lt;Match { ...route } render={(props) =&gt; &lt;route.component {...props} /&gt;} /&gt;
</code></pre>

<p>P.S. This works only in alpha version,  and  were removed after the v4 alpha release. In v4 latest,  is once again , with the path and exact props.</p>

<p><a href="https://github.com/peter-mouland/react-lego" rel="noreferrer">react-lego</a> an example app contains code that does exactly this <a href="https://github.com/peter-mouland/react-lego/blob/react-router-4/src/app/routes.js" rel="noreferrer">in routes.js on its react-router-4 branch</a></p>


blocks|key|62975|text|使用自定义路由组件，这在React路由器v3中是可能的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|62976|var+Dashboard+=+require('./Dashboard');
var+Comments+=+require('./Comments');
var+routes+=+(
++<Route+path="/"+handler={Index}>
++++<MyRoute+myprop="value"+path="comments"+handler={Comments}/>
++++<DefaultRoute+handler={Dashboard}/>
++</Route>
);|code-block|syntax|javascript|62977|至于<MyRoute>组件代码，应该如下所示：|CODE|62978|import+React+from+'react';
import+{+Route+}+from+'react-router';
import+{+createRoutesFromReactChildren+}+from+'react-router/lib//RouteUtils';

const+MyRoute+=+()+=>+<div>&lt;MyRoute&gt;+elements+are+for+configuration+only+and+should+not+be+rendered</div>;

MyRoute.createRouteFromReactElement+=+(element,+parentRoute)+=>+{
++++const+{+path,+myprop+}+=+element.props;
++++//+dynamically+add+crud+route
++++const+myRoute+=+createRoutesFromReactChildren(
++++++++<Route+path={path}+/>,
++++++++parentRoute
++++)[0];
++++//+higher-order+component+to+pass+myprop+as+resource+to+components
++++myRoute.component+=+({+children+})+=>+(
++++++++<div>
++++++++++++{React.Children.map(children,+child+=>+React.cloneElement(child,+{+myprop+}))}
++++++++</div>
++++);
++++return+myRoute;
};

export+default+MyRoute;|62979|有关自定义路由组件方法的更多详细信息，请查看我关于主题的博客文章：http://marmelab.com/blog/2016/09/20/custom-react-router-component.html|62980|entityMap|0|LINK|mutability|MUTABLE|url|http://marmelab.com/blog/2016/09/20/custom-react-router-component.html^0|2|7|0|0|2|9|0|0|X|1Y|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@$9|14|A|15|B|M]]|D|@]|E|$]]|$1|N|3|O|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|P|3|Q|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|R|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>Using a <strong>custom route component</strong>, this is possible in React Router v3. </p>

<pre class="lang-js prettyprint-override"><code>var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
  &lt;Route path="/" handler={Index}&gt;
    &lt;MyRoute myprop="value" path="comments" handler={Comments}/&gt;
    &lt;DefaultRoute handler={Dashboard}/&gt;
  &lt;/Route&gt;
);
</code></pre>

<p>As for the <code>&lt;MyRoute&gt;</code> component code, it should be something like:</p>

<pre class="lang-js prettyprint-override"><code>import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';

const MyRoute = () =&gt; &lt;div&gt;&amp;lt;MyRoute&amp;gt; elements are for configuration only and should not be rendered&lt;/div&gt;;

MyRoute.createRouteFromReactElement = (element, parentRoute) =&gt; {
    const { path, myprop } = element.props;
    // dynamically add crud route
    const myRoute = createRoutesFromReactChildren(
        &lt;Route path={path} /&gt;,
        parentRoute
    )[0];
    // higher-order component to pass myprop as resource to components
    myRoute.component = ({ children }) =&gt; (
        &lt;div&gt;
            {React.Children.map(children, child =&gt; React.cloneElement(child, { myprop }))}
        &lt;/div&gt;
    );
    return myRoute;
};

export default MyRoute;
</code></pre>

<p>For more details about the custom route component approach, check out my blog post on the subject: <a href="http://marmelab.com/blog/2016/09/20/custom-react-router-component.html" rel="nofollow">http://marmelab.com/blog/2016/09/20/custom-react-router-component.html</a></p>


blocks|key|1878605|text|用于响应路由器2.x。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878606|const+WrappedComponent+=+(Container,+propsToPass,+{+children+})+=>+<Container+{...propsToPass}>{children}</Container>;|code-block|syntax|javascript|1878607|在你们的路线上..。|1878608|<Route+path="/"+component={WrappedComponent.bind(null,+LayoutContainer,+{+someProp+})}>
</Route>|1878609|确保第三个param是一个类似于：{+checked:+false+}的对象。|offset|length|style|CODE|1878610|entityMap^0|0|0|0|0|H|I|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>For react router 2.x.</p>

<pre><code>const WrappedComponent = (Container, propsToPass, { children }) =&gt; &lt;Container {...propsToPass}&gt;{children}&lt;/Container&gt;;
</code></pre>

<p>and in your routes...</p>

<pre><code>&lt;Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}&gt;
&lt;/Route&gt;
</code></pre>

<p>make sure the 3rd param is an object like: <code>{ checked: false }</code>.</p>


blocks|key|1878643|text|使用基于Rajesh+Naroth答案的或不带路由器的组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878644|class+Index+extends+React.Component+{

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

var+routes+=+(
++<Route+path="/"+foo="bar"+component={Index}/>
);|code-block|syntax|javascript|1878645|或者你可以这样做：|1878646|export+const+Index+=+({foo,+route})+=>+{
++const+content+=+(foo)+?+foo+:+(route)+?+route.foo+:+'No+content+found!';
++return+<h1>{content}</h1>
};|1878647|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Use the component with or without router based on Rajesh Naroth answer.</p>

<pre><code>class Index extends React.Component {

  constructor(props) {
    super(props);
  }
  render() {
    const foo = (this.props.route) ? this.props.route.foo : this.props.foo;
    return (
      &lt;h1&gt;
        Index - {foo}
      &lt;/h1&gt;
    );
  }
}

var routes = (
  &lt;Route path="/" foo="bar" component={Index}/&gt;
);
</code></pre>

<p>Or your could do it this way:</p>

<pre><code>export const Index = ({foo, route}) =&gt; {
  const content = (foo) ? foo : (route) ? route.foo : 'No content found!';
  return &lt;h1&gt;{content}&lt;/h1&gt;
};
</code></pre>


blocks|key|63073|text|下面是我想出的最干净的解决方案()：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|63074|<Route
++path="/"
++component={props+=>+<MyComponent+{...props}+foo="lol"+/>}
/>|code-block|syntax|javascript|63075|MyComponent还有props.match和props.location，还有props.foo+===+"lol"。|offset|length|style|CODE|63076|entityMap^0|0|0|0|B|D|B|P|E|16|J|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|N|$]]

<p>Here's the cleanest solution I've come up with (React Router v4):</p>

<pre><code>&lt;Route
  path="/"
  component={props =&gt; &lt;MyComponent {...props} foo="lol" /&gt;}
/&gt;
</code></pre>

<p><code>MyComponent</code> still has <code>props.match</code> and <code>props.location</code>, and has <code>props.foo === "lol"</code>.</p>


blocks|key|63140|text|这是Rajesh的解决方案，没有不方便的由yuji评论，并更新了Router+4。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|63141|守则是这样的：|63142|<Route+path="comments"+render={(props)+=>+<Comments+myProp="value"+{...props}/>}/>|code-block|syntax|javascript|63143|请注意，我使用的是render而不是component。其原因是为了避免不想要的重装。我还将props传递给了该方法，并在注释组件上使用了与对象扩展运算符(ES7提议)相同的道具。|style|CODE|63144|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/39027174/5452969|1|https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component#comment67441820_39027174|2|https://reacttraining.com/react-router/web/api/Route/component^0|2|B|0|K|7|1|0|0|0|9|6|I|9|1A|5|10|6|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|19|8|@$A|1A|B|1B|M|N]|$A|1C|B|1D|M|N]|$A|1E|B|1F|M|N]]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|O|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]|Y|$5|R|S|T|C|$U|Z]]]]

<p>This is the <a href="https://stackoverflow.com/a/39027174/5452969">solution from Rajesh</a>, without the inconvenient <a href="https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component#comment67441820_39027174">commented by yuji</a>, and updated for React Router 4.</p>

<p>The code would be like this:</p>

<pre><code>&lt;Route path="comments" render={(props) =&gt; &lt;Comments myProp="value" {...props}/&gt;}/&gt;
</code></pre>

<p>Note that I use <code>render</code> instead of <code>component</code>. The reason is to avoid <a href="https://reacttraining.com/react-router/web/api/Route/component" rel="noreferrer">undesired remounting</a>. I also pass the <code>props</code> to that method, and I use the same props on the Comments component with the object spread operator (ES7 proposal).</p>


blocks|key|1878760|text|反应路由器v4溶液|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1878761|今天早些时候我偶然发现了这个问题，下面是我使用的模式。希望这对任何寻求最新解决方案的人都有帮助。|1878762|我不确定这是否是最好的解决方案，但这是我目前的模式。我通常有一个Core目录，在该目录中，我将我常用的组件与它们的相关配置(加载器、modals等)保存在一起，我还包括这样一个文件：|1878763|import+React+from+'react'
import+{+Route+}+from+'react-router-dom'

const+getLocationAwareComponent+=+(component)+=>+(props)+=>+(
++<Route+render={(routeProps)+=>+React.createElement(component,+
{...routeProps,+...props})}/>
)

export+default+getLocationAwareComponent|code-block|syntax|javascript|1878764|然后，在所讨论的文件中，我将执行以下操作：|1878765|import+React+from+'react'
import+someComponent+from+'components/SomeComponent'
import+{+getLocationAwareComponent+}+from+'components/Core/getLocationAwareComponent'
const+SomeComponent+=+getLocationAwareComponent(someComponent)

//+in+render+method:
<SomeComponent+someProp={value}+/>|1878766|您会注意到，我将我的组件的默认导出作为简陋的camel-case导入，它允许我在CamelCase中命名新的位置感知组件，这样我就可以正常使用它了。除了附加的导入行和赋值行之外，组件按照预期的方式运行，并正常接收其所有支持，并添加所有路由支持。因此，我可以愉快地使用this.props.history.push()从组件生命周期方法重定向，检查位置等。|1878767|希望这能有所帮助！|1878768|entityMap^0|0|9|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|16|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

<p><strong>React Router v 4 solution</strong></p>

<p>I stumbled upon this question earlier today, and here is the pattern I use. Hopefully this is useful to anyone looking for a more current solution.</p>

<p>I'm not sure if this is the <em>best</em> solution, but this is my current pattern for this.  I have typically have a Core directory where I keep my commonly used components with their relevant configurations (loaders, modals, etc), and I include a file like this:</p>

<pre><code>import React from 'react'
import { Route } from 'react-router-dom'

const getLocationAwareComponent = (component) =&gt; (props) =&gt; (
  &lt;Route render={(routeProps) =&gt; React.createElement(component, 
{...routeProps, ...props})}/&gt;
)

export default getLocationAwareComponent
</code></pre>

<p>Then, in the file in question, I'll do the following: </p>

<pre><code>import React from 'react'
import someComponent from 'components/SomeComponent'
import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent'
const SomeComponent = getLocationAwareComponent(someComponent)

// in render method:
&lt;SomeComponent someProp={value} /&gt;
</code></pre>

<p>You'll notice I import the default export of my component as humble camel-case, which lets me name the new, location-aware component in CamelCase so I can use it normally.  Other than the additional import line and the assignment line, the component behaves as expected and receives all its props normally, with the addition of all the route props. Thus, I can happily redirect from component lifecycle methods with this.props.history.push(), check the location, etc.</p>

<p>Hope this helps!</p>


blocks|key|1878777|text|这可能是将反应性路由器-dom与cookie处理程序结合使用的最佳方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878778|在index.js中|1878779|import+React,+{+Component+}+from+'react'
import+{Switch,Route,Redirect}+from+"react-router-dom"
import+{RouteWithLayout}+from+"./cookieCheck"

import+Login+from+"../app/pages/login"
import+DummyLayout+from+"../app/layouts/dummy"
import+DummyPage+from+"../app/pages/dummy"+

export+default+({props})=>{
return(
++++<Switch>
++++++++<Route+path="/login"+component={Login}+/>
++++++++<RouteWithLayout+path="/dummy"+layout={DummyLayout}+component={DummyPage}+
++++++++{...props}/>
++++++++<Redirect+from="/*"+to="/login"+/>
++++</Switch>
++)
}|code-block|syntax|javascript|1878780|并使用cookieCheck|1878781|import+React+,+{createElement}+from+'react'
import+{Route,Redirect}+from+"react-router-dom"
import+{COOKIE,getCookie}+from+"../services/"

export+const+RouteWithLayout+=+({layout,component,...rest})=>{
++++if(getCookie(COOKIE)==null)return+<Redirect+to="/login"/>
++++++++return+(
++++++++<Route+{...rest}+render={(props)+=>
++++++++++++createElement(layout,+{...props,+...rest},+createElement(component,+
++++++{...props,+...rest}))
+++++++}
++++++/>
++++)
}|1878782|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>this is probably the best way to use react-router-dom with a cookie handler  </p>

<p>in index.js </p>

<pre><code>import React, { Component } from 'react'
import {Switch,Route,Redirect} from "react-router-dom"
import {RouteWithLayout} from "./cookieCheck"

import Login from "../app/pages/login"
import DummyLayout from "../app/layouts/dummy"
import DummyPage from "../app/pages/dummy" 

export default ({props})=&gt;{
return(
    &lt;Switch&gt;
        &lt;Route path="/login" component={Login} /&gt;
        &lt;RouteWithLayout path="/dummy" layout={DummyLayout} component={DummyPage} 
        {...props}/&gt;
        &lt;Redirect from="/*" to="/login" /&gt;
    &lt;/Switch&gt;
  )
}
</code></pre>

<p>and use a cookieCheck</p>

<pre><code>import React , {createElement} from 'react'
import {Route,Redirect} from "react-router-dom"
import {COOKIE,getCookie} from "../services/"

export const RouteWithLayout = ({layout,component,...rest})=&gt;{
    if(getCookie(COOKIE)==null)return &lt;Redirect to="/login"/&gt;
        return (
        &lt;Route {...rest} render={(props) =&gt;
            createElement(layout, {...props, ...rest}, createElement(component, 
      {...props, ...rest}))
       }
      /&gt;
    )
}
</code></pre>


blocks|key|63183|text|class+App+extends+Component+{
++constructor(props){
++++super(props);

++++this.state+=+{
++++++data:null
++++}


++}
+componentDidMount(){
+++database.ref().on('value',+(snapshot)+=>{
+++++this.setState({
+++++++data+:+snapshot.val()
++++++})
+++});
+}

++render(){
++//++const+{+data+}+=+this.state
++return+(
++++<BrowserRouter>
++++++<Switch>
++++++++<Route+exact+path+=+"/"+component+=+{+LandingPage+}++/>
++++++++<Route+
++++++++++path='/signup'+
++++++++++render+=+{+()+=>+<Signup++data+=+{this.state.data}+/>}+/>
++++++++</Switch>
++++</BrowserRouter>

++);
++}
};

export+default+App;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|63184|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      data:null
    }


  }
 componentDidMount(){
   database.ref().on('value', (snapshot) =&gt;{
     this.setState({
       data : snapshot.val()
      })
   });
 }

  render(){
  //  const { data } = this.state
  return (
    &lt;BrowserRouter&gt;
      &lt;Switch&gt;
        &lt;Route exact path = "/" component = { LandingPage }  /&gt;
        &lt;Route 
          path='/signup' 
          render = { () =&gt; &lt;Signup  data = {this.state.data} /&gt;} /&gt;
        &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;

  );
  }
};

export default App;
</code></pre>


blocks|key|1878825|text|像下面这样使用解决方案，这在v3.2.5中是有效的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1878826|<Route
++path="/foo"
++component={()+=>+(
++++<Content
++++++lang="foo"
++++++meta={{
++++++++description:+lang_foo.description
++++++}}
++++/>
++)}
/>|code-block|syntax|javascript|1878827|或|1878828|<Route+path="/foo">
++<Content
++++lang="foo"
++++meta={{
++++++description:+lang_foo.description
++++}}
++/>
</Route>|1878829|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Use the solution like a below and this works in v3.2.5.</p>
<pre class="lang-js prettyprint-override"><code>&lt;Route
  path=&quot;/foo&quot;
  component={() =&gt; (
    &lt;Content
      lang=&quot;foo&quot;
      meta={{
        description: lang_foo.description
      }}
    /&gt;
  )}
/&gt;
</code></pre>
<p>or</p>
<pre class="lang-js prettyprint-override"><code>&lt;Route path=&quot;/foo&quot;&gt;
  &lt;Content
    lang=&quot;foo&quot;
    meta={{
      description: lang_foo.description
    }}
  /&gt;
&lt;/Route&gt;
</code></pre>


blocks|key|63281|text|我已经回答了这个问题，这里。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|63282|下面是几种可以将道具传递给路由组件的方法。|63283|通过使用react路由器v5，我们可以通过使用组件来创建路由，这样我们就可以轻松地将道具传递到所需的组件。|63284|<Route+path="/">
++++<Home+name="Sai"+/>
</Route>|code-block|syntax|javascript|63285|类似地，您可以在v5中使用子道具。|63286|<Route+path="/"+children={+<Home+name="Sai"+/>}+/>|63287|如果您使用的是react路由器v4，您可以使用渲染工具传递它.|63288|侧注-引用React路由器儿童-漏斗医生|style|BOLD|63289|有时，您需要呈现路径是否与位置匹配。在这些情况下，您可以使用函数子支持。它的工作方式与呈现完全一样，只是不管是否匹配，它都会被调用。|blockquote|63290|<Route+path="/"+render={()+=>+<Home+name="Sai"+/>}+/>|63291|(最初张贴在https://reactgo.com/react-router-pass-props/上)|63292|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/55328558/react-router-pass-props-to-route-component/61471081#61471081|1|https://v5.reactrouter.com/web/api/Route/children-func|2|https://reactgo.com/react-router-pass-props/^0|B|2|0|0|0|0|0|0|0|0|0|2|D|7|1|0|0|0|6|18|2|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@$A|1G|B|1H|1|1I]]|C|$]]|$1|D|3|E|5|6|7|1J|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1L|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1M|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1N|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|C|$]]|$1|S|3|T|5|6|7|1P|8|@$A|1Q|B|1R|U|V]]|9|@$A|1S|B|1T|1|1U]]|C|$]]|$1|W|3|X|5|Y|7|1V|8|@]|9|@]|C|$]]|$1|Z|3|10|5|J|7|1W|8|@]|9|@]|C|$K|L]]|$1|11|3|12|5|6|7|1X|8|@]|9|@$A|1Y|B|1Z|1|20]]|C|$]]|$1|13|3|-4|5|6|7|21|8|@]|9|@]|C|$]]]|14|$15|$5|16|17|18|C|$19|1A]]|1B|$5|16|17|18|C|$19|1C]]|1D|$5|16|17|18|C|$19|1E]]]]

<p>I have answered this already <a href="https://stackoverflow.com/questions/55328558/react-router-pass-props-to-route-component/61471081#61471081">here</a>.</p>
<p>Here are few ways you can pass props to a route component.</p>
<p>With the react-router v5, we can create routes by wrapping with a  component, so that we can easily pass props to the desired component like this.</p>
<pre class="lang-js prettyprint-override"><code>&lt;Route path=&quot;/&quot;&gt;
    &lt;Home name=&quot;Sai&quot; /&gt;
&lt;/Route&gt;
</code></pre>
<p>Similarly, you can use the children prop in v5.</p>
<pre class="lang-js prettyprint-override"><code>&lt;Route path=&quot;/&quot; children={ &lt;Home name=&quot;Sai&quot; /&gt;} /&gt;
</code></pre>
<p>If you are using react-router v4, you can pass it using the render prop.</p>
<p><strong>Side Note</strong> - Quoting from React router <a href="https://v5.reactrouter.com/web/api/Route/children-func" rel="nofollow noreferrer">children-func doc</a></p>
<blockquote>
<p>Sometimes you need to render whether the path matches the location or
not. In these cases, you can use the function children prop. It works
exactly like render except that it gets called whether there is a
match or not.</p>
</blockquote>
<pre class="lang-js prettyprint-override"><code>&lt;Route path=&quot;/&quot; render={() =&gt; &lt;Home name=&quot;Sai&quot; /&gt;} /&gt;
</code></pre>
<p>(originally posted at <a href="https://reactgo.com/react-router-pass-props/" rel="nofollow noreferrer">https://reactgo.com/react-router-pass-props/</a>)</p>


blocks|key|1878914|text|React路由器v5.1+(React+>=+16.8)就是这样做的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1878915|<Route+path="/comments">
++++<Comments+myprop="value"+/>
</Route>|code-block|syntax|javascript|1878916|现在，如果您想在组件中访问线路道具，那么您可以引用这个解决方案。对于functional，还有另一个钩子useParams()在文章中没有提到。|CODE|1878917|更多参考：反应路由器v5.1|1878918|entityMap|0|LINK|mutability|MUTABLE|url|https://reactrouter.com/web/api/Route/route-props|1|https://stackoverflow.com/a/37523743/11613622|2|https://reactrouter.com/web/api/Hooks/useparams|3|https://reacttraining.com/blog/react-router-v5-1/^0|8|4|0|0|1G|B|D|4|0|R|4|1|1G|B|2|0|5|9|3|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|M]]|D|@$9|1A|A|1B|1|1C]|$9|1D|A|1E|1|1F]|$9|1G|A|1H|1|1I]]|E|$]]|$1|N|3|O|5|6|7|1J|8|@]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|P|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]|X|$5|S|T|U|E|$V|Y]]|Z|$5|S|T|U|E|$V|10]]|11|$5|S|T|U|E|$V|12]]]]

<p>The React Router <strong>v5.1</strong> (React &gt;= 16.8) way of doing this:</p>
<pre><code>&lt;Route path=&quot;/comments&quot;&gt;
    &lt;Comments myprop=&quot;value&quot; /&gt;
&lt;/Route&gt;
</code></pre>
<p>Now if you want to access <a href="https://reactrouter.com/web/api/Route/route-props" rel="nofollow noreferrer">Route Props</a> inside your component then you can refer this <a href="https://stackoverflow.com/a/37523743/11613622">solution</a>. In case of functional component, there is another hook <a href="https://reactrouter.com/web/api/Hooks/useparams" rel="nofollow noreferrer"><code>useParams()</code></a> that is not mentioned in that post.</p>
<p>More reference: <a href="https://reacttraining.com/blog/react-router-v5-1/" rel="nofollow noreferrer">React Router v5.1
</a></p>


blocks|key|63384|text|在react路由器-v3中，我找不到任何可行的解决方案，所以我做了一个很大的权衡，使用类继承而不是道具。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|63385|例如：|63386|class+MyComments+extends+Comments{
++constructor(props)+{
++++super(props);
++++this.myProp+=+myValue;
++}
}|code-block|syntax|javascript|63387|而且，在没有道具的路由器的MyComments中使用component。|offset|length|style|CODE|63388|然后，可以使用this.myProp获取componentDidMount()函数中的“myValue”；|63389|entityMap^0|0|0|0|D|A|Q|9|0|7|B|K|J|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]|$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$K|11|L|12|M|N]|$K|13|L|14|M|N]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|R|$]]

<p>In react-router-v3, I do NOT find any working solutions, so I make a big trade-off, use class inherit instead of props.</p>
<p>for example:</p>
<pre><code>class MyComments extends Comments{
  constructor(props) {
    super(props);
    this.myProp = myValue;
  }
}
</code></pre>
<p>and, you use <code>MyComments</code> in Router's <code>component</code> without props.</p>
<p>then, you can use <code>this.myProp</code> to get 'myValue' in <code>componentDidMount()</code> function;</p>


<p>I have the following structure for my React.js application using <a href="https://github.com/ReactTraining/react-router" rel="noreferrer">React Router</a>:</p>

<pre><code>var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

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

var routes = (
  &lt;Route path="/" handler={Index}&gt;
    &lt;Route path="comments" handler={Comments}/&gt;
    &lt;DefaultRoute handler={Dashboard}/&gt;
  &lt;/Route&gt;
);

ReactRouter.run(routes, function (Handler) {
  React.render(&lt;Handler/&gt;, document.body);
});
</code></pre>

<p>I want to pass some properties into the <code>Comments</code> component. </p>

<p>(normally I'd do this like <code>&lt;Comments myprop="value" /&gt;</code>)</p>

<p>What's the easiest and right way to do so with React Router?</p>


react-router - pass props to handler component

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

对于使用React.js的应用程序，我的结构如下var Dashboard = require('./Dashboard');var Comments = require('./Comments');var Index = React.createClass({  render: function () {    re...

问react路由器传递支持到处理程序组件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问react路由器传递支持到处理程序组件EN