React-router -向处理程序组件传递道具

我有以下结构为我的React.js应用程序使用React路由器:

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路由器最简单和正确的方法是什么?

当前回答

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

代码是这样的:

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

注意，我使用渲染而不是组件。原因是为了避免不必要的重新挂载。我还将道具传递给该方法，并在Comments组件上使用对象展开操作符(ES7建议)。

2017-04-08 19:45:08

其他回答

React路由器v5.1 (React >= 16.8)这样做的方式:

<Route path="/comments">
    <Comments myprop="value" />
</Route>

现在，如果你想访问组件中的Route Props，你可以参考这个解决方案。对于函数组件，还有另一个钩子useParams()在那篇文章中没有提到。

更多参考:React Router v5.1

2020-12-20 08:15:03

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

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

需要注意的是，使用这种方法，任何通过Router发送的道具(比如params)都会被覆盖/删除。

2015-04-18 17:25:25

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;

2019-07-04 00:23:00

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

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

2015-09-24 12:56:32

对于react路由器2.x。

const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>;

在你的路线上…

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

确保第3个参数是一个类似于:{checked: false}的对象。

2016-12-14 10:04:58

React-router -向处理程序组件传递道具

推荐文章

最新文章

标签