How can I pass encoded values by `Link` using react-router?

Question

Sorry to disturb, guys. I'm so new to react and react-router and I've been struggling for few days already.

Actually I am trying to pass some values before jumping to a new page (using Link attribute target="_blank") and in the new page, I want to use these values to communicate with the server and when the data from the server comes, the new page will load its content.

the route path is something like this

<Route path="/root/the_page" component={the_component} />

and the link will be like this:

<Link to="/root/the_page" target="_blank" />

What I have checked is this discussion about using a function to pass the value, but I really cannot re-produce it. As for the query-params, I cannot retrieve the query in this.props.location even I set the link as follows:

<Link to={{pathname:"/root/the_page", query: {the_key: the_value}}} target="_blank" />

Any advice will be helpful.

Thank you in advance!

Check this answer https://stackoverflow.com/questions/44121069/how-to-pass-params-with-history-push-in-react-router-v4/45263164#45263164. this should help you. — Shubham Khatri, Nov 14 '17 at 11:07
Thank you! I checked it and I think it should solve the issue. — Hearen, Nov 14 '17 at 13:42

score 0 · Accepted Answer · answered Nov 14 '17 at 11:00

0

I don't see any reason why you would want to use React-Router to navigate to an external page. React-Router is meant for navigation in single-page applications but opening a link with target="_blank" would mean leaving that single-page app and opening new window/tab.

As such, why not just use a regular anchor tag? That's perfectly viable for external navigation.

<a href="/root/the_page?the_key=the_value" target="_blank">Click me</a>

Obviously, your history object won't be carried over because you are opening a new window/tab - so you won't be able to go "back" or do any of that.

answered Nov 14 '17 at 11:00

Chris

57,622
19
111
137

I'm using this `Link` due to the original system which I am developing. To keep consistent with the whole structure, I try to use `react` for the view, `redux` to control the state and `router` to visit other pages (composed of components). – Hearen Nov 14 '17 at 13:42
@Hearen, I don't understand. – Chris Nov 14 '17 at 13:44
I will try it tomorrow when I get back to the PC. I am just not quite familiar to the `link` and web stuff...hahah, thank you man – Hearen Nov 14 '17 at 14:12
@Hearen `` is a [tag:react-router] component. However, this becomes an `` tag if you inspect it in your browser. Anyway, try it tomorrow and let me know. Good luck! – Chris Nov 14 '17 at 14:18
It is indeed, thank you @Chris. I encoded the key-value pairs and pass it to the component in the `pathname` and then get it from `window.location.href` and parse it in the target component. Just like `anchor tag`. Thank you Chris. – Hearen Nov 15 '17 at 01:24

score 0 · Answer 2 · answered Nov 14 '17 at 11:15

0

Check this codepen (click on users submenu item). The new window is opened with params.

<Link to={{pathname: "/users", query: { someParam: 'someValue' }}} target="_blank">Users</Link>

https://codepen.io/Kotuhan/pen/JOJzNY

Then, you can get your params from window.location.search string.

answered Nov 14 '17 at 11:15

Богдан Денисюк

59
4

1

Also, if your param value is undefined - param may be not passed. Check the "the_value" first – Богдан Денисюк Nov 14 '17 at 11:17
Thank you, man. I tried this by appending the encoded kay-value pairs after the path (of course the router path will accept `data` to enable this) and then the final result will be as follows: `` and `` and then in the target component, I access it via `window.locationl.href` and then parse it. Thank you, man. – Hearen Nov 15 '17 at 01:23

How can I pass encoded values by `Link` using react-router?

2 Answers2