import { Link } from 'react-router-dom'; ... const Button = () => { <Link to="SOME_S3_URL"/> <button>Go to S3 URL</button> </Link> } When I click it, it's not working. Is it possible to do so?
2 Answers
I guess SOME_S3_URL is referring to an URL to Amazon S3, which in that case, is outside of your application.
So you should use a normal <a/> instead since <Link /> is designed for internal navigation.
As for your comment about "creating a reusable button", you just apply CSS to the <a /> element so that it will look like a button. This is a common practice used by multiple popular UI libraries like MUI and Chakra UI.
2 Comments
CCCC
I tried to use <a> tag, but it just redirect me to path
/
Matthew Kwong
What's the exact value of
SOME_S3_URL?It is not possible to do so as is; the Link component renders an anchor element, something fundamentally different than a button element.
If you need to use your reusable button, something you can do is:
import { useNavigate } from 'react-router-dom'; ... const Button = () => { const navigate = useNavigate(); return (<button onClick={() => navigate("SOME_S3_URL")}>Go to S3 URL</button>); } 5 Comments
qslabs
My answer targets v6,
useNavigate replaces useHistory from v5.
Drew Reese
It's pretty common to wrap a button in a link if you want a link that looks like a button. It's not great, but it isn't uncommon.
Mattwmaster58
I really dislike this pattern of using a JS function to navigate instead of using an
a tag. This breaks accessibility, copying the URL, letting the user choose new tab/window, drag dropping the link, and link click history off the top of my head.qslabs
@Mattwmaster58 I'm curious, given the post's constraints what would be an alternative solution? The author specified they do not want to use an
a tag.Mattwmaster58
I didn't see that constraint in the authors comments, with that constraint in mind this is a good answer. Although IMO the reason the author claims they can't use an anchor element doesn't quite make sense to me.
href"/"character, but it looks like you are trying to link to a URL outside the app, you will need to use a regular anchor tag for this.react-router-domonly links to internal pages rendered by the router. What is an actual target path value you are trying to use?"SOME_S3_URL"isn't very helpful.react-router-dom. That library is only for SPA "fake" routing