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!
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.
Click me
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.
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.
Related
Can't see a way in V6 to dynamically add an external link without the router prepending the site URL. Just need to do something like this:
<a href={dynamicStrValue} target='_blank' rel='noreferrer'>Link</a>
What about:
<Link to={{ pathname:`https://example.com/${dynamicStrValue}`}} target="_blank">My link</Link>
Referring to their docs
<Link to> with a .. behaves differently from a normal when
the current URL ends with /. ignores the trailing slash, and
removes one URL segment for each ... But an value handles ..
differently when the current URL ends with / vs when it does not.
Your link must include the protocol to avoid RR prepending the site url.
I was having the same problem as you, when executing an external component using a plain anchor tag it was redirecting to the router, instead of opening a blank page.
The solution to my problem was simply removing the key param in the anchor tag as follows
<a key={item.key} href='{item.url}' target='_blank'> {item.title} <a/>
to
<a href='{item.url}' target='_blank'> {item.title} <a/>
<Link to={`channels/${channel.channel_name}`}> {channel.channel_name}</Link>
Let's say the user is watching a video (current url = 'localhost:3000/videos/1') and they want to click on the channel's link, when they do I want to send them to 'localhost:3000/channels/Lun', but for some reason the links just stack like this 'localhost:3000/videos/1/channels/Lun'... I treid using the replace keyword but that doesnt work too, any help is appreciated!
Need to change the link like this.
<Link to={`/videos/${//route here}`}>
I have a site.
http://example.com
On my site I have multiple languages which get appended to the url.
So the homepage becomes something such as
http://example.com/english
When the user navigates to the account section, it is a React single page app with React Router
http://example.com/english/account
On this account section, there are multiple tabs that load different templates
http://example.com/english/account/login
http://example.com/english/account/create-account
Now the 'english' part of the url could be any language (french, german, spanish). How would I set up my React routing to account for this dynamic part of the url? I ultimately want to do something with a wildcard effect, but this doesn't seem to work
<NavLink className="nav" to="/*/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
Adding explicit values such as
/english/account/login seems to work. But I'd rather not hardcode every language
You can use props.match.url for creating relative urls.
<NavLink className="nav" to={this.props.match.url}+"/account/login">
<div>
<h5>Login</h5>
</div>
</NavLink>
I'm working on editor where user can set link to another website , for example stackoverflow.com. If user set this url to <a> element and then click on this link he will be navigated to http://myapp.com/stackoverflow.com but not to http://stackoverflow.com. I supposed that this is caused by changed default behavior of element.
How can i make this link external? if user will copy url from browser and paste he will paste http://stackoverflow.com and hence everything will works fine. But in case he manually enter stackoverflow.com nothing will work fine.
P.s. i also would like to make each element with attribute target="_blank" so, i assume that i can't navigate programatically
Any ideas?
Try setting the <a>'s href attribute to the full url, not just stackoverflow.com:
<a href="http://stackoverflow.com" />
Otherwise it's treated as a relative url.
Add a check to see whether your users input the url as stackoverflow.com, and if they do, change it to http://stackoverflow.com before setting the href attribute.
Didn't get your other question about programmatic navigation, but if you want a link to open in a new window/tab, use
<a href="http://stackoverflow.com" target="_blank" />
I am using react-router + react-router-redux in my app.
What I want to achieve is every time user click a tab in the dashboard it will change the URL to /dashboard/messages, for instance.
However, using push('dashboard/' + page), every time I click a tab it will append the link.
My current situation:
Current URL is /dashboard.
Click a Messages tab.
The URL changes into /dashboard/messages.
Click a Home tab.
The URL changes into /dashboard/messages/dashboard/home.
Is there any way to just replace the /dashboard/messages into /dashboard/home when we click Home tab after cliked the Messages tab?
Many thanks!
I found the silly mistake, sorry for this.
So apparently it has to be push('/dashboard/' + page) instead of push('dashboard/' + page).
If you're coming in here from a react-router-dom perspective, please note that <Link to='stringUrl' /> concatenates whatever you place on the to attribute to the current path. So, if you are currently on /home path, it will produce /home/StringUrl as a result.
However, if you place a forward slash / instead, i.e. <Link to='/stringUrl' /> it won't do that, thus producing /StringUrl path.
use this
push('/dashboard/' + page)