我有以下结构为我的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路由器最简单和正确的方法是什么?


当前回答

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

下面是几种将道具传递给路由组件的方法。

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

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

类似地,您可以在v5中使用子道具。

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

如果您正在使用react-router v4,您可以使用渲染道具传递它。

旁注-引用React路由器children-func文档

有时您需要呈现路径是否匹配位置或 不是。在这些情况下,您可以使用函数child prop。它的工作原理 和渲染完全一样,除了它会被调用是否有 匹配与否。

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

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

其他回答

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

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

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

更多参考:React Router v5.1

React路由器的问题是它会渲染你的组件,因此会阻止你传入道具。另一方面,导航路由器允许你渲染你自己的组件。这意味着您不必像下面的代码和附带的JsFiddle显示那样跳过任何障碍来传递道具。

var Comments = ({myProp}) => <div>{myProp}</div>;

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

摘自接受的回复中ciantic的评论:

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

在我看来,这是最优雅的解决办法。它的工作原理。帮助了我。

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

附注:这只适用于alpha版本,并且在v4 alpha发布后被删除。在v4 latest中,同样是带有路径和精确props的。

React-lego是一个示例应用程序,它在react-router-4分支的routes.js中包含了这样做的代码

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

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