react-router - 将props传递给处理程序组件

Question

我使用React Router为我的React.js应用程序提供了以下结构:

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);
});

我想将一些属性传递给Comments组件.

(通常我会这样做<Comments myprop="value" />)

使用React Router,最简单,最正确的方法是什么？

Answer 1

如果你不想写包装器,我想你可以这样做:

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}/>
);

Answer 2

自新版本更新后,可以直接通过Route组件传递道具,而无需使用Wrapper

例如,通过使用render道具.链接到反应路由器:https://reacttraining.com/react-router/web/api/Route/render-func

在codesandbox的代码示例:https://codesandbox.io/s/z3ovqpmp44

零件

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>
    );
  }
}

和用法

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

旧版

我首选的方法是包装Comments组件并将包装器作为路由处理程序传递.

这是应用更改的示例:

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);
});

Answer 3

在接受的回复中复制ciantic的评论:

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

在我看来,这是最优雅的解决方案.有用.帮助过我.

Answer 4

这是来自Rajesh的解决方案,没有由yuji评论的不便,并为React Router 4更新.

代码如下:

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

请注意,我使用render而不是component.原因是避免不希望的重新安装.我也传递props给那个方法,并且我使用对象扩展运算符(ES7提议)在Comments组件上使用相同的道具.

Answer 5

只是ColCh答案的后续行动.抽象组件的包装非常容易:

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})}/>

我还没有测试过这个解决方案,所以任何反馈都很重要.

重要的是要注意,使用此方法,通过路由器发送的任何道具(例如params)都会被覆盖/删除.

Answer 6

您可以通过传递道具<RouteHandler>(在v0.13.x中)或在v1.0中传递路径组件本身来传递道具;

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

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

(来自https://github.com/rackt/react-router/releases/tag/v1.0.0的升级指南)

所有儿童操作员都将获得相同的道具 - 根据具体情况,这可能有用或不有用.

Answer 7

使用ES6,您可以直接制作组件包装器:

<Route path="/" component={() => <App myProp={someValue}/>} >

如果你需要传递孩子:

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >

Answer 8

React-router v4 alpha

现在有一种新的方法来做到这一点,尽管与之前的方法非常相似.

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} />} />

PS这仅适用于alpha版本,并在v4 alpha版本发布后删除.在v4最新,再次,与道路和精确道具.

react-lego示例app包含在react-router-4分支上的routes.js中完成此操作的代码

Answer 9

这是我提出的最干净的解决方案(React Router v4):

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponent仍然有props.match和props.location,并且有props.foo === "lol".

Answer 10

您还可以使用RouteHandler mixin来避免包装器组件,并且更容易将父级状态作为props传递:

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);
});

Answer 11

您可以通过以下方式传递道具<RouterHandler/>:

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>
    );
  }
});

这样做的缺点是你不分青红皂白地传递道具.因此Comments,根据您的路线配置,最终可能会收到真正用于不同组件的道具.这不是一件props大事,因为它是不可变的,但如果两个不同的组件期望一个名为foo但具有不同值的道具,这可能会有问题.

Answer 12

用无状态函数组件包装它:

<Router>
  <Route 
    path='/' 
    component={({children}) => 
      <MyComponent myProp={'myVal'}>{children}</MyComponent/>
    }/>
</Router>

Answer 13

在1.0和2.0中,您可以使用createElementprop Router来指定创建目标元素的确切方式.文档来源

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

Answer 14

我已经在这里回答了这个问题。

您可以通过以下几种方式将 props 传递给路由组件。

使用react-router v5，我们可以通过组件包装来创建路由，这样我们就可以像这样轻松地将props传递给所需的组件。

<Route path="/">
    <Home name="Sai" />
</Route>

同样，您可以在 v5 中使用 Children 属性。

<Route path="/" children={ <Home name="Sai" />} />

如果您使用的是react-router v4，则可以使用 render 属性传递它。

旁注- 引用 React router Children-func 文档

有时您需要渲染路径是否与位置匹配。在这些情况下，您可以使用 Children 属性函数。它的工作方式与渲染完全相同，只是无论是否匹配都会调用它。

<Route path="/" render={() => <Home name="Sai" />} />

（最初发布于https://reactgo.com/react-router-pass-props/）

Answer 15

您还可以结合使用es6和无状态函数来获得更清晰的结果:

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
      }
    ]
}

Answer 16

React Router v 4解决方案

我今天早些时候偶然发现了这个问题，这就是我使用的模式。希望这对正在寻求最新解决方案的人很有用。

我不确定这是否是最好的解决方案，但这是我目前的做法。通常，我有一个Core目录，在其中保存常用组件及其相关配置（加载程序，模态等），并包含一个类似以下的文件：

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

然后，在有问题的文件中，执行以下操作：

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} />

您会注意到我将组件的默认导出导入为驼峰式的情况，这使我可以在CamelCase中命名新的位置感知组件，因此我可以正常使用它。除了附加的导入线和分配线以外，该组件的行为与预期的一样，并正常添加所有路径道具，并添加了所有路径道具。因此，我可以很高兴地使用this.props.history.push（）从组件生命周期方法重定向，检查位置等。

希望这可以帮助！