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" />
Related
I am building a Pinterest clone that uses React on the front-end.
The home page is /pins, which is just an index of all the pins. In the Pin Index Item component, when a user clicks on the pin, I am using Link to go to the correct path.
Here is the Link to in the PinIndexItem.jsx
<Link to={`users/${pin.author_id}/boards/${pin.board_id}/pins/${pin.id}`}>
Here is the Route in my App.jsx
<Switch>
<ProtectedRoute exact path='/users/:userId/boards/:boardId/pins/:pinId' component={PinShowContainer} />
</Switch>
When I go from the pins route, which is
#/pins/
It works just fine
However, I am on a user's pin board, which is
users/${pin.author_id}/boards/${pin.board_id}/
instead of going to
users/${pin.author_id}/boards/${pin.board_id}/pins/${pin.id}
, it adds onto the path:
users/${pin.author_id}/boards/users/${pin.author_id}/boards/${pin.board_id}/pins/${pin.id}`
I am confused why it works differently in the second case. Thank you.
Should I just use history.push in both cases?
On a link element, if you omit the initial / on the href attribute (the target URL for the link), the href attribute value will be appended to the current URL. This is a link relative to the current page (href value will be appended to the current page full URL).
For example if the current page URL is /here and you set up a link with href="there", then clicking on that link will get you to /here/there.
If you want to set up a link to an absolute path, you need to add an initial / on the href attribute. From my previous example, if the current page URL is /here and you set up a link with href="/there", then clicking on that link will get you to /there.
You should be able to solve your problem by switching to absolute paths, or use different relative paths.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a for a complete doc.
<Button href={node.slug}>
<span>Read more</span>
</Button>
So basically this is a button in a Card component, i don't think more code would present more meaning, please ask for more if needed. The node.slug variable is something like "product-name". In local environment works fine, but not after deployment on Github pages.
This is a button on a product-category page(i.e. /tools or /maintenance), clicking the button the first time, takes me to:
xxx.github.io/project-name/product-name/
Issue is that after i go back and then click the button again, /product-category/ gets added to the URL:
xxx.github.io/project-name/product-category/product-name/
This is not the link i want to be at, as there is no page here. The first URL is where i want to be, as that's the URL type where products are at. /product-category/ will not go away unless i click the Home Page button.
If I infer correctly node.slug is something like "product-name".
That means that it is not an absolute path, and therefore you can interpret it as ./product-name.
Try with:
<Button href={`/project-name/${node.slug}`}> ... </Button>
Another approach would be to change your base href of your pages. Add a <base> element in you <head>:
<head>
...
<base href="http://xxx.github.io/project-name/">
</head>
Then all your non-absolute hrefs will start from that base.
Don’t forget to add a / at the end of the base’s href!
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.
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)
I have a page /hello where i have a link:
<a href="{{#url 'goodbye' }}{{/url}}">
that will redirect to /goodbye. But i want it to use an anchor too, something like /goodbye#message
I have tried doing:
<a href="{{#url 'goodbye' }}{{/url}}#message">
but when I click on it, it will redirect the page to /goodbye. It seems like Chaplin is deleting the anchor.
EDIT:
For the templates I'm using handlebars (with the chapling boilerplate), the {{#url}} helper generates correctly the link ( cf view-helper.js ). In the rendered page i see:
<a href="/goodbye#message">
but when i click on it, it just redirects me to /goodbye
Any idea?
Found a solution, I needed to stop the routing on the link. I just added the class noscript on the tag
<a href="{{#url 'goodbye' }}{{/url}}#message" class="noscript">
I couln't find a different way to do it. Hope this helps someone else
cf : skipRounting on Chaplin.Layout