Question

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

组件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} />} />
)}

Answer 1

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

Answer 2

我不太确定这是否是您要的内容，但我认为这是：）

假设这是您要从组件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 个答案: