My problem is passing ${file.id} to link, but when I navigate to that link, I only receive like this:
the ${file.id} is not get correct value.
But when I inspect the key of row, it can render correct.
What are my mising?
Thanks
You are using the wrong quotes. String interpolation is not possible with single quotes or doublequotes. You have to use the backtick `
So
<Link to={'api/admin/blobManager/${file.id}'} />
should instead be
<Link to={`api/admin/blobManager/${file.id}`} />
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/>
I'm using NextJs. I would like to create a link in my header section. This link should take the user to TestimonialsSection on the same page by scrolling.
<Link href={"#TestimonialsSection"}>
<a className={styles.Designation}>Mentor</a>
</Link>
This is the code I tried, but it didn't work. The URL changes though. Thanks in advance
In vanilla HTML you'd do something like this
My first section
My second section
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
In NextJS you'd so something similar. Instead of using the anchor tag for linking, you'd use the Link components.
<Link href="#first-section">My first section</Link>
<Link href="#second-section">My second section</Link>
<div id="first-section">SECTION 1</div>
<main id="second-section">SECTION 2</main>
This would work just fine.
However, if you want your starting URL to be www.my-site.com/#second-section, you would need to set the Link component's scroll prop to false.
Ex:
...
<Link href="#second-section" scroll={false}>My second section</Link>
...
Make sure your sections/divs ie the target elements have the ID attribute set to them properly without the # and the corresponding
anchor links have the # prefixed to ID name
Here's the official NextJS documentation https://nextjs.org/docs/api-reference/next/link
Hope this resolves your issue.
If it's just a static string you should remove the braces as ЖнецЪ says above.
If you're making a reusable component where you need to specify the ID from a parent, use a template string and keep the braces.
<Link href={`#${props.id}`}>
<a className={styles.Designation}>Mentor</a>
</Link>
Try to use Link tag and in URL add #some-link and then in Link tag href with href='#some-link'
www.google.com/#some-link
<Link href='#some-link'>
// code section
</Link>
I'm trying to get some data from my state passed down into this img
src url, and I can't seem to figure how to write it. I've tried using back
ticks and the dollar sign. I assume because I'm down in the render part
of the Component that won't work. Help me Obi-Wan, you're my only
hope.
<img src={'https://openweathermap.org/img/w/{data.weather.icon}.png'} alt='weather condition' />
Just like with vanilla JS, you have to use a Template Literal and use string interpolation to place your JS within the string (with a ${...}) like so:
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
you can use Template Literal
<img src={`https://openweathermap.org/img/w/${data.weather.icon}.png`} alt='weather condition' />
I've search an answer to this question and couldn't find a good answer
Im tring to have some formatting in my app and I'm using react-intl. The app looks like this:
<div>
<FormattedMessage
id={"some.id"}
defaultMessage={`{important} this not bold anymore`}
values={{
important: `<b>Important:</b>`
}}
/>
</div>
My problem is that the return value is being escaped and I see
<b>Important:</b> this not bold anymore
If I understand correctly, this is done by react as it doesn't allow <> symbols in a string, and is escaping them.
As I saw in many places, I can use dangerouslySetInnerHTML but this is not the right approach to this...
Will appreciate any helpfull advice!
EDIT: Just to be clear - dangerouslySetInnerHTML can be used if instead of using the FormattedMessage component, I'll use formattedmessage function.
Ok.. I missed that I had `` around the value... My bad.. Thanks anyway!
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.