Why is my React app opening in Google Chrome instead of the API?

I have a link in my React app that is supposed to open a PDF in another page, but for some reason Google Chrome is redirecting me to the React application instead of opening the API endpoint that renders the PDF. The URL for the PDF is /api/file/:_id and my React app is located at /. Below are my Express routes:

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

When I click on the link:

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

Google Chrome keeps opening the React page instead of the PDF file, whereas Safari opens the PDF just fine.

Thank you for any help or insight you can provide.

javascriptreactjsgoogle-chrome

Answer №1

When working with react, it is recommended to utilize the <Link> component provided by the react-router-dom package.
Check out react-router documentation here

If you need to redirect to an external website, you can achieve this by using: 

<Link to={{pathname: "//www.stackoverflow.com/"}} target="_blank">Visit StackOverflow</Link>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble updating outside controller data while using AngularJS directive inside ng-repeat loop

I am currently working with a isolate scope directive that is being used inside an ng-repeat loop. The loop iterates over an array from the controller of the template provided below: <!DOCTYPE html> <html> <head> <link rel="sty ...

javascriptangularjsangularjs-directiveangularjs-ng-repeatisolate-scope

What steps can be taken to diagnose the cause of a failed Jquery AJAX request?

I am attempting to utilize the Yahoo Finance API to retrieve data in CSV format through Javascript. However, my current implementation shown below is not successful. $.ajax({ type: "GET", url: "http://finance.yahoo.com/d/quotes.csv?s=RHT+MSFT&f=sb2b3j ...

javascriptjquery

Is it possible to consolidate React web and React-Native projects into a single project?

Our team is in the process of building a project that consists of a Node.js backend, as well as web/mobile web and mobile app front-ends. Currently, we have the project organized into 2 separate folders: Main Project (React Project) /dist (for distri ...

reactjsreact-native

What is the best way to attach an event listener to the clear button in the ReactJS Material-UI autocomplete feature?

Seeking advice for a ReactJS/Material-UI beginner question. I am trying to incorporate an event listener into the Material-UI autocomplete clear button, as shown in the screenshot provided. While I am aware of the existing onChange and onInputChange event ...

reactjsautocompletematerial-ui

unable to retrieve the value of this.table property within a JavaScript class

In my JavaScript code, I have created a class that generates a MySQL model like so: class Model { constructor(options = {}, table) { this.options = options; this.table = table; this.create(); } create() { let queryString = `INSERT INT ...

javascriptmysqlnode.jsoop

When incorporating props into styled components, the outcome often turns out to be unexpectedly

I have implemented styled components to change the text color by passing props. <Button variant = 'colour' type="submit" form="myForm" className="submit-btn"> Submit </Button& ...

cssreactjsnext.jsstyled-components

The alignment of Div elements is off in IE8

I have been struggling to align two divs side by side without any empty spaces on IE 8. Everything looks perfect on Chrome Version 35.0.1916.153 m and Firefox 30.0, but IE 8 seems to be causing some issues. All I want is a main div with two child divs ali ...

htmlcssgoogle-chromefirefoxinternet-explorer-8

Utilizing multiple instances of fs.writeFile in Node.js

I am currently managing a hotel's check-in/out information on an http server in Node.js. I store all the JSON data in memory and write it to a file using "fs.writeFile". Typically, the data does not exceed 145kB, but when consecutive calls to fs.write ...

javascriptnode.jsconcurrencywritefile

Any ideas on how to fix the issue of 'type' property being absent in 'AsyncThunkAction' with Redux Toolkit while working with TypeScript?

While working with Redux Toolkit and the thunk/slice below, I decided to handle errors locally instead of setting them in state. To achieve this, I followed the example provided here. Although I could have set an error in the state, I wanted to explore wh ...

reactjstypescriptreduxredux-thunkredux-toolkit

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

javascripthtmlcssresponsive-designhtml-table

The class type "selectLabel" passed to the classes property in index.js:1 for Material-UI is not recognized in the ForwardRef(TablePagination) component

Just started using react and encountering a repetitive error in the console after adding this new component. Here is the full error message: Material-UI: The key selectLabel provided to the classes prop is not implemented in ForwardRef(TablePagination). ...

javascriptreactjs

Updating the object in router.get and res.render in Node.js and Express after loading

When loading the page, I encounter an error with req.body.firstname.length inside router.use. The error states: TypeError: Cannot read property 'length' of undefined The issue arises because the default value is undefined for the input form. ...

javascriptajaxnode.jsexpress

I must update the menu to show only one sub-menu at a time, ensuring that multiple menus cannot be displayed simultaneously

When I click on a menu option, it displays correctly, but when I click on another option, both are displayed. The goal is to only display one at a time. $('.sub-menu ul').hide(); $(".sub-menu a").click(function () { $(this).paren ...

javascripthtmljquerycssfrontend

Tips for showcasing information from the tmdb api by leveraging the value or data obtained from a separate api

I am currently working on a project that involves displaying movie data using the tmdb api. I receive the response from my own api which only includes the id of the tmdb movie. Here is an example of the response: [ { "id": 0, "tit ...

javascript

How to implement bi-directional scroll animation in JavaScript for top and bottom movements

In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...

javascripthtmlcssanimation

Identifying Elements Generated on-the-fly in JavaScript

Currently, I am tackling the challenge of creating a box that can expand and collapse using regular JavaScript (without relying on jQuery). My main roadblock lies in figuring out how to effectively detect dynamically added elements or classes to elements a ...

javascript

To begin, formulating a blank state entity containing a collection of key-value pairs with JSON objects as the values. Subsequently, modifying the contents of

I am working on setting up a reactJS state with an empty array to start. When I receive a message in the form of a JSON object, I want to add a key-value pair to the array, using the received message as the value and a specified key. For example: We have ...

javascriptjsonreactjs

$injector.modulerr problem

After spending a considerable amount of time analyzing every line of code, I can't seem to pinpoint any errors. Here is what I have: HTML: <body ng-app='myApp'> <div class="wrapper"> <nav> <ul ng-controller="pat ...

javascriptangularjsfrontendngroute

Utilizing an external type definition in JSDoc @typedef

I'm encountering an issue with reducing redundancy when defining my imported types. I am trying to streamline the process, but unfortunately I am running into errors. /** @typedef {import("../types/util")} util @typedef {util.mapBehaviors} m ...

javascripttypescriptjsdoc

Obtaining the login status of users on my website and displaying the number of users along with their names from the database using PHP

Can anyone assist me with figuring out how to retrieve the login status of users on my website and display the count of users along with their names from the database using PHP or jQuery? Alternatively, I am also interested in simply finding out the num ...

javascriptphpjquerymysql