JS Problems geeksforgeeks Exercises and Solutions for Beginners

How to Set a Default Page for All URLs using React Router 📌[All Method]️

Are you looking for an easy guide on How to Set a Default Page for All URLs using React Router. By following this guide, you will be able to deal with these sorts of difficulties.
Question: What is the best solution for this problem? Answer: This blog code can help you solve errors How to Set a Default Page for All URLs using React Router. Question: “What should you do if you run into code errors?” Answer:”You can find a solution by following this blog.

I needed a route in one my React applications that handled all unmatched requests, particularly to handle 404 (page not found) errors.

A Basic React Router Example

For example, what if I had this React Router code in App.js?

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const Home = () => <h1>Home!</h1>;
const About = () => <h1>About!</h1>;
const App = () => (
  <Router>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
  </Router>
);
export default App;

We can easily navigate to the / and /about routes, but what if a user navigates to /anythingelse or /nonexistentpage?

The Switch Component

Fortunately, we can use the <Switch> component, which renders the first <Route> child that matches. It’s also important to note that a <Route> with no path will always match.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h1>Home!</h1>;
const About = () => <h1>About!</h1>;
const NoMatch = () => <h1>404 Error: page does not exist!</h1>;
const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route component={NoMatch} />
    </Switch>
  </Router>
);
export default App;

We can drop the path attribute and just specify a component for any page that does not match / or /about.

This means that our NoMatch component will render at the link /anythingelse, /nonexistentpage, and anything that’s not / or /about.

We can also have the route redirect to a custom 404 error page.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = () => <h1>Home!</h1>;
const About = () => <h1>About!</h1>;
const NoMatch = () => <h1>404 Error: page does not exist!</h1>;
const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/error" component={NoMatch} />
      <Redirect to="/error" />
    </Switch>
  </Router>
);
export default App;

In this case, /anythingelse and /nonexistentpage will redirect to /error and display our NoMatch component.


Revise the code and make it more robust with proper test case and check an error there before implementing into a production environment.
Final Note: Try to Avoid this type of mistake(error) in future!

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button