score:2

Accepted answer
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);

score:-1

export class Main extends Component {

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

Related Query

More Query from same tag