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

Posted 2023-02-22

【中文标题】如何使用 ReactJS 通过我的 React-Router 传递数据？

【英文标题】：How to Pass Data Through My React-Router with ReactJS?

【发布时间】：2017-12-17 14:21:50

【问题描述】：

我有以下 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 似乎没有任何神奇的解决方案，所以我想在升级之前我会问。谢谢！

【问题讨论】：

你的意思是把它传递给StaticPage props 还是在URL里面传递？

在我的搜索页面的 URL 中。我已经通过在静态页面中执行 h1 对其进行了测试，它可以正确呈现，但它没有传递到我的页面。

所以您将名称作为道具传递给要传递给 Search 的 StaticPage？

【参考方案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"。

【讨论】：

感谢您的详尽解释。像魅力一样工作！

@JessieRichardson 没问题，很高兴为您提供帮助！

@AndrewLi 我正在尝试同样的事情来向我的功能组件发送一些道具，但它没有被传递。你能帮忙吗，有没有其他方法可以将道具传递给功能组件。

【参考方案2】：

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

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

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

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

【讨论】：

谢谢大家！我遇到了错误，但这只是因为我需要熟悉 RR4 的新规则。我明天早上会继续工作，然后回来汇报。