如何使用 ReactJS 通过我的 React-Router 传递数据? [英] How to Pass Data Through My React-Router with ReactJS?

问题描述

我有以下 JSON 对象...

{ name: "Jessie" }

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

静态页面.jsx

export default class StaticPage extends React.Component {使成为() {返回 (<div><路由器历史={hashHistory}><Route path='/' component={Search}/><Route path='/favorites' component={Favorites}/></路由器>

);}}

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

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

解决方案

这是因为 的 >component 属性仅渲染带有 路由道具，不是你提供的道具.

您可以使用 render 上的 a> 或 component 属性，以传递返回

的函数.显式传递 name 的 元素:

<搜索名称={this.props.name}/>}/>

或者使用component:

<搜索名称={this.props.name}/>}/>

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

render={routeProps =><搜索名称={this.props.name} {...routeProps}/>}

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

当你导航到 /Bob 时，你可以访问 this.props.match.params.name 这会给你 "Bob">.

I have the following JSON object...

{ name: "Jessie" }

And I want to be able to pass it through my Router so that it can be displayed on my pages. For example, this is my root page...

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

So passing this data to Search, I would imagine might look something like this...

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

However, nothing gets rendered when I do that. I have researched this quite a bit and understand, from what I've read, that you cannot pass objects through the Router. It's very odd bc Router looks like a traditional React component but does not function as such. None of the explanations of a work around seem clear to me. Could anyone provide me with an example using this code? I am using react-router 3.0. There didn't seem to be any magical solution with 4.0 so I figured I'd ask before upgrading. Thanks!

解决方案

It's because the component prop of <Route> only renders the component with route props, not your supplied props.

You can use the render or component prop on a <Route> in React Router v4 to pass a function which returns a <Search> element that explicitly passes the name:

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

Or with component:

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

But you should prefer render or else you'll have lots of remounting. If you still plan to use route props, you can also do:

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

A whole different approach, one more elegant in my opinion is to use route params and pass the name directly through the URL:

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

When you navigate to /Bob, you can access this.props.match.params.name which'll give you "Bob".

这篇关于如何使用 ReactJS 通过我的 React-Router 传递数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！