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

Question

我有以下 JSON 对象...

{ name: "Jessie" }

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

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

但是，当我这样做时，什么都没有渲染。我已经对此进行了很多研究，并且从我所读到的内容中了解到，您不能通过路由器传递对象。很奇怪，路由器看起来像一个传统的 React 组件，但它并没有这样的功能。对我来说，解决方法的任何解释都不清楚。任何人都可以为我提供使用此代码的示例吗？我正在使用反应路由器 3.0。 4.0 似乎没有任何神奇的解决方案，所以我想在升级之前我会问。谢谢！

Answer 1

这是因为<Route> 的component 属性仅渲染组件带有route props，而不是您提供的属性。

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

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

或者component:

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

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

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

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

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

当您导航到/Bob 时，您可以访问this.props.match.params.name，这将为您提供"Bob"。

Answer 2

直接通过路由传递对象数据不是一个好习惯。建议通过这种方式传递name或id等参数：

<Route path='/favorites/:name' component={Favorites} />

并从您在目的地的请求中检索它。

这是一个重复的问题：Pass object through Link in react router