使用反应路由器链接时如何将道具从一个组件传递到另一个组件答案

【问题标题】：How to pass a prop from one component to another when using react router link使用反应路由器链接时如何将道具从一个组件传递到另一个组件
【发布时间】：2019-11-06 01:19:06
【问题描述】：

我想将 prop productId 从 home 组件传递给 main 组件。

导航到新组件时如何传递一些初始状态

主页组件

let productId = "123" // get from query string

return (
       <Button className="startButton"
                            variant="contained"
                            color="primary"
                            component={Link} to="/main"
                            fullWidth>
                            Start
                        </Button>
)

主要组件

export class Main extends Component {

    constructor(props) {
        super(props);

        this.state = {
            productId: "",
        }
  }

}

然后在我的主要组件中，我可以设置该 productId 的状态。

路由器

const Router = () => {

    return (
        <Switch>
            <Route exact path='/' component={Home}/>
            <Route exact path="/main" component={Main} />
        </Switch>
    )
}

export default Router;

我正在使用以下库 https://reacttraining.com/react-router/web/guides/quick-start

更新： https://reacttraining.com/react-router/web/guides/basic-components/route-rendering-props

您可以在这里看到该示例传递了一些额外的属性someVariable 我希望能够做到这一点。

【问题讨论】：

你的组件是如何相互连接的？
我不认为我理解这个问题。我有一个路由器文件，我在其中声明了所有 url，以及应该根据确切路径呈现的组件。然后在我的主组件中，我使用反应路由器链接根据 url component={Link} to="/main" 导航到主组件，这有帮助吗？
如果它们没有以任何方式连接，那么 redux 是在组件之间传递数据的正确方式 - redux.js.org
我已经在使用 redux
因为你已经在使用redux，你可以在reducer中维护productId，在你的查询被执行时，从主组件调度更新productId的操作，将你的主组件连接到redux 商店，现在您可以在导航到同一组件时更新主组件中的值。

标签： reactjs react-router-dom

【解决方案1】：

试试下面给出的 wrapperLink 组件。在给定的示例中，我给出了常量状态值，而不是动态地给出值

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter } from "react-router-dom";

import "./styles.css";

const wrapperLink = (state, path) =>
  React.forwardRef((props, ref) => (
    <Link
      innerRef={ref}
      to={{
        pathname: path,
        state: {
          ...state
        }
      }}
      {...props}
    />
  ));

const state = {
  title: "sample"
};

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Route
          path="/"
          render={({ location }) => (
            <Fragment>
              <Tabs value={location.pathname}>
                <Tab label="Item One" component={Link} to="/" />
                <Tab label="Item Two" component={wrapperLink(state, "/tab2")} />
                <Tab
                  label="Item Three"
                  href="#basic-tabs"
                  component={Link}
                  to="/tab3"
                />
              </Tabs>
              <Switch>
                <Route
                  path="/tab2"
                  render={props => <div>{props.location.state.title}</div>}
                />
                <Route path="/tab3" render={() => <div>Tab 3</div>} />
                <Route path="/" render={() => <div>Tab 1</div>} />
              </Switch>
            </Fragment>
          )}
        />
      </div>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是代码框click here中的工作示例

【讨论】：

这是我一直在寻找的，但它不适用于我的示例我的主要组件没有状态 productid。我是否需要在主要组件中分配 productid="" 的默认状态
啊，我在 {props.location.state.title} 找到的

【解决方案2】：

如果我清楚地理解你不需要通过，因为它们已经在属性匹配对象中可用。

export class Main extends Component {

    constructor(props) {
        super(props);
        const {productId} = props.match.params; 
        this.state = {productId}
  }
}

【讨论】：

那里不可用，它是空的。我将从接收查询参数的主组件转到主组件。
这不是 OP 要求的。