ReactJS: React-Router pass value to another page

Question

I have need to pass a value from a page to another using react-router.

I have tried in this way:

<li>
    <A 
      className="btn btn-link btn-sm"
      href={{ pathname: Routes.detail_page, search: `?_id=${C.Code}`, state: this.props.current  }}>
      { 'Open' }
    </A>
</li>

I would pass this.props.current to Detail Page.

In the other page if I tried in the componentDidMount() to print this.props.current it result undefined (of course in the first page this value is parametrized).

constructor(props){
    super(props);
    this.state = {
    };
  }
componentDidMount(){
    let C = this.props.current
    console.log("C is: ", C) // this is undefined
    this.updateIsDeletableState()
  }

How can I do?

I only have tried to print the this.props.current usign console.log in the componentDidMount(). What do you need to know? :) — Keyz23
– Keyz23, Commented Jun 25, 2020 at 8:31
Make sure you have the following in your component where you are trying to access the props: ``` constructor(props){ super(props); this.state = { //states }; } ``` — Dhruv Shah
– Dhruv Shah, Commented Jun 25, 2020 at 8:35

Rostyslav · Accepted Answer · 2020-06-25 08:44:09Z

1

You have to make sure that you have defined URL parameter in the Route

// file-where-you-define-routes.js
...
<Switch>
  <Route path={`your-path/:id`} component={YourComponent} />
</Switch>
...

Then use hook useParams to get the parameter

function YourComponent() {
  const { id } = useParams();
  let C = id;
  console.log("C is: ", C) // this should be defined now
  ...
}

OR if you use class component this.props.match.params.id

class YourComponent extends Component {
  ...
  componentDidMount(){
    let C = this.props.match.params.id; // match
    console.log("C is: ", C) // this should be defined now
    this.updateIsDeletableState()
  }
}

edited Jun 25, 2020 at 8:44

answered Jun 25, 2020 at 8:38

Rostyslav

2,88612 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dhruv Shah Over a year ago

Additionally, the route can declaration can also be updated as following to pass the props <Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={Props through render} />} />

Collectives™ on Stack Overflow

ReactJS: React-Router pass value to another page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related