反应路由器将变量/状态传递给新路由？

Posted 2023-02-22

【中文标题】反应路由器将变量/状态传递给新路由？

【英文标题】：react router passing variable/state to new route?

【发布时间】：2018-12-14 12:50:18

【问题描述】：

我在一个组件中创建了一个动态变量，然后该组件路由到另一个组件。如何传递变量？

组件 A

import React,  Component  from 'react';

class Event extends React.Component 
   makeVariable(event)
    myVariable = '123abc' 

   window.location.replace("/B")

   render ()  return (html for page A)

export default A;

组件 B

import React,  Component  from 'react';

class B extends Component 
    render() console.log(myVariable)

export default B;

路由文件

export const makeMainRoutes = () => 
  return (
    <Router history=history>
        <div>
          <Route path="/A" render=(props) => <App auth=auth ...props /> />
          <Route path="/B" render=(props) => <Home auth=auth ...props /> />
)

【问题讨论】：

您希望如何/何时传递数据？也许通过点击一个按钮？

【参考方案1】：

我不太确定这是否是您要问的，但我会假设它是:)

假设这是您要从组件 A 发送到组件 B 的数据。

const yourData = [name: 'Tom', age: 28, name: 'Sara', age: 25, name: 'Rick', age: 34];

您可以使用Link 标签将数据从一个组件传递到另一个组件，如下所示：

<Link to= pathname: `/component/b`, state:  yourData  ></Link>

[也许添加一个按钮标签，以便用户可以单击它，转到下一个路由，将传递必要的数据] ...然后，在组件 B 中，您可以像这样访问您的数据：

const passedData= this.props.history.location.state.yourData;

【讨论】：

感谢您的帮助，我认为这是通过按钮单击或链接单击路由到新链接，但我需要从函数内部转到新路由，所以第一个响应似乎更像我认为的我需要的东西

【参考方案2】：

在 React Router 4 中，您应该能够通过 props.location.search 访问查询参数。

组件 A

window.location.replace(`/B?myVariable=$myVariable`);

组件 B

import queryString from 'query-string';

render() 
  console.log(queryString.parse(this.props.location.search).myVariable));

【讨论】：

谢谢你这个作品，但是如果我想让 myVariable 持有一个对象呢？似乎不起作用它给了我 createdEvent: "[object Object]"

如果您要在路由级组件之间传递对象，您似乎真正想要的是像 Redux 这样的全局状态管理器。查询参数方法只对简单的情况有用。