how to pass parameters to component using react route link

Question

I'm using react and am trying to link to another page using the tag. For example, I want to link back to the login screen with a parameter signupCompleted like so:

<Link to={{ pathname: '/', query: { signupCompleted: true } }}>
    <Button bsStyle="primary" onClick="sendSignupRequest" className="pull-
     right confirm-button-style">Send</Button>
</Link>

My component is routed to a path in my app.js:

<Route exact path='/' component={LoginPage} />

and in loginPage.js I try to reach the passed parameter in the constructor:

this.state = {
      signupCompleted: props.signupCompleted,
    };

However that is never set to true. I've looked at Pass props in Link react-router, but nothing seems to do the trick.

Any ideas?

What is `query: { signupCompleted: true }` doing ? is it a string represenation of query parameters or query to persist to the location ? which version of `react-router-dom` are you using — Aaqib, Feb 24 '18 at 20:38
@Aaqib It's suppose to be used to indicate to the loginpage if it has been redirected from pressing the sign up button where the tag is, its suppose to be a boolean. I'm running version 4.2.2 of react-router-dom — boking, Feb 24 '18 at 21:01

score 1 · Answer 1 · answered Feb 24 '18 at 21:27

1

As stated Here you can pass object as :

pathname: A string representing the path to link to.

search: A string represenation of query parameters.

hash: A hash to put in the URL, e.g. #a-hash.

state: State to persist to the location.

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { signupCompleted: true }
}}/>

above is copied from here

Now inside your Login.js

You can do it initially set signupCompleted to false :

this.state = { signupCompleted: false };

answered Feb 24 '18 at 21:27

Aaqib

9,942
4
21
30

thank you @Aaqib for your answer! I have changed the link to be and in my login.js i have this.state = { signupCompleted: false}; however it still doesn't seem to ever set the variable to true. – boking Feb 24 '18 at 21:51
Can you show your component where you are using Link ? – Aaqib Feb 24 '18 at 22:20
I just have a signupPage.js where in the render() method I have a Link tag with a bootstrap button like so: The routes are both declared in the main App.js component: render() { return ( ); } – boking Feb 24 '18 at 22:50
And where have you declared `this.state = {{ signupCompleted: false }` – Aaqib Feb 24 '18 at 22:59
In the constructor of the loginpage: constructor(props, context) { super(props, context); this.state = { signupCompleted: false, }; } – boking Feb 25 '18 at 11:13

score 0 · Answer 2 · answered Feb 24 '18 at 21:01

Define the route as following:

<Route path="/login/:signupCompleted" component={LoginPage} />

The Link should be:

<Link to={`/login/${signupCompleted}`}>Login</Link>

And in the LoginPage component, this.props.match.params.id is the value of signupCompleted.

how to pass parameters to component using react route link

2 Answers2