Как передать реквизит от одного компонента к другому при использовании реактивного соединения с роутером

Question

Я хочу передать prop productId от домашнего компонента к основному компоненту.

Как я могу передать начальное состояние при переходе к новому компоненту

домашний компонент

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.

router

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 нажмите здесь

Answer 2

Если я четко понимаю, вам не нужно передавать, поскольку они уже доступны в свойствах, соответствующих объекту.

export class Main extends Component {

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