Question

我想将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，我希望能够这样做。

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

这是codeandbox click here

中的有效示例

Answer 2

如果我清楚地知道您不需要通过，因为它们已经在与Object匹配的属性中可用。

export class Main extends Component {

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

使用React Router Link时如何将道具从一个组件传递到另一个组件

2 个答案: