reactjs - 如何使用 ReactJS 通过我的 React-Router 传递数据？

Question

我有以下 JSON 对象...

{ name: "Jessie" }

我希望能够通过我的路由器传递它，以便它可以显示在我的页面上。例如，这是我的根页面...

静态页面.jsx

export default class StaticPage extends React.Component {
    render() {
        return (
                <div>
                <Router history={hashHistory}>
                    <Route path='/' component={Search} />
                    <Route path='/favorites' component={Favorites} />
                 </Router>
                 </div>
        );
    }
}

所以将这些数据传递给搜索，我想可能看起来像这样......

<Route path='/' component={Search} name = {this.props.name}/>

但是，当我这样做时，没有任何东西被渲染。我对此进行了相当多的研究，并从我所读到的内容中了解到，您不能通过路由器传递对象。很奇怪 bc Router 看起来像一个传统的 React 组件，但实际上并没有这样的功能。对我来说，解决方法的任何解释都不是很清楚。谁能为我提供使用此代码的示例？我正在使用 react 路由器 3.0。 4.0 似乎没有任何神奇的解决方案，所以我想我会在升级前询问。谢谢!

Answer 1

这是因为 component 的 <Route> Prop 仅使用 route props 呈现组件，而不是您提供的 Prop 。

您可以在 React Router v4 中的 render 上使用 component 或 <Route> 属性来传递一个函数，该函数返回显式传递 <Search> 的 name 元素:

<Route path="/" render={() => <Search name={this.props.name} />} /> 

或使用 component :

<Route path="/" component={() => <Search name={this.props.name} />} /> 

但是你应该更喜欢 render 否则你会有很多重新安装。如果你仍然打算使用路由 Prop ，你也可以这样做:

render={routeProps => <Search name={this.props.name} {...routeProps} />}

一种完全不同的方法，在我看来更优雅的方法是使用路由参数并直接通过 URL 传递名称:

<Route path="/:name" component={Search} />

当您导航到 /Bob 时，您可以访问 this.props.match.params.name ，它会给您 "Bob" 。