React Router is a go-to routing library in the React ecosystem. React Router provides a declarative and easy API to handle navigation and add pages in the app. One of the most common errors developers face while working with front-end apps is the unexpected token error. It doesn't matter which framework you are using; you will stumble upon this error more frequently than you think.
const randomNum = Math.random();
In the above line of code, the
random() method of the in-built
Math object is invoked. It is a correct line and hence won't throw any errors.
Now, consider the following line.
const randomNum = Math.random());
MDN defines the error as follows.
Fortunately for developers, such errors are highlighted by the linters in code editors, so developers can fix it even before the app runs in the browser.
There are instances when an error occurs during runtime. Take a look at the following scenario to React. As soon as the app starts, it shows the React error page saying "unexpected token '<'".
./app.js path, when the index page loads the browser sends a request to
/app.js, which is successful. But when the user navigates to another page, the browser sends a request to
/another-page/app.js, which is an incorrect path in the server.
Tracking down runtime errors can be a pain, especially when the dev tools aren't helping much. Hence, it is crucial to understand the code and logically find the bug.
You can use debugger statements to control the flow of execution and inspect variables in real time when the app is running. The networks tab is also an essential section of the dev tools, which lets you see all the outgoing requests and incoming responses in the browser. If you have any queries, feel free to ask at Codealphabet.