How to Redirect to the Main Page in React JS When Refreshing Other Pages

Question

With the help of proper code and explanation, can you tell me how to Redirect to the Main Page in React JS When Refreshing Other Pages?

Answer 1

To redirect users to the main page when refreshing other pages in React JS, you can handle this by utilizing the Redirect component from React Router or using the useHistory hook for programmatic navigation.

Using Redirect Component:

This component can be used in a conditional rendering setup. If a certain condition is met (like when a user tries to access a page other than the main page), it will redirect them to the main page.

For example:

if (!isAuthenticated) {

  return <Redirect to="/" />;

}

Using useHistory Hook:

You can also use the useHistory hook from React Router in functional components to programmatically navigate users to the main page on certain conditions. For example:

const history = useHistory();

useEffect(() => {

  if (condition) {

    history.push('/');

  }

}, [condition]);