Why does Google Chrome is opening my React App instead of the API?

Question

I have a link in my react app supposed to open in an another page a pdf but google chrome is opening the react application instead of my api that renders the pdf The url of my pdf is /api/file/:_id and my react app is at / Express routes below :

app.use("/api/file", fileRouter)
app.get("*", (req, res) => {
    return res.sendFile(path.join(__dirname, "/front/build/index.html"))
})

When I click on my link

<a href={`/api/file/${invoice._id}`} target="_blank" rel="noreferrer">link</a>

chrome is opening the react page and not my file whereas Safari open my file.

Thanks for your help.

Answer 1

In react you should use <Link> component from react-router-dom.
react-router

If you want to redirect to outside website, you have to do something like:
<Link to={{pathname: "//www.stackoverflow.com/"}} target="_blank">StackOverflow</Link>