Question 72758 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to prevent current page reload and go to home page in React? – Reactjs

I want to redirect to home page from every page in my app. So I add the below code:

<Switch>
    <Route path="/login" component={Login} />
    <Route path="/otp" component={Otp} />
    <Layout>
      <Suspense fallback={<LayoutSplashScreen />}>
        <Redirect push to="/homePage" />
        <ContentRoute
          path="/homePage"
          component={RequestTabel}
          children={undefined}
          render={undefined}
        />
        <ContentRoute
          path="/Register"
          component={RegisterPage}
          children={undefined}
          render={undefined}
        />
         .
         .
         .
   </Layout>
</Switch>

Now, when I refresh every page then I go to home page but the current page reloads and after that, the app goes to home page. I don’t know why and I want to proofread it. I’ve searched a lot and I can the below link but I have to add it in all of my pages in the app and I think, it’s not the correct solution.

if (performance.navigation.type === 1) {
// page was just refreshed:

window.location.href = '/homePage';
}

I add other parts of related code to my question:

routes.tsx

export default function Routes() {
 return ( 
    <Switch>
       <HashRouter>
          <BasePage />
       </HashRouter>
    </Switch>
  );
}

BasePage is the above code that I’ve written first.

Tags:

2

Answers


  1. 0

    Your layout simply exists, calling Redirect every time.
    I am not sure which routing library you’re using. If it is react-router-dom, take a look at their documentation to route Layouts. The TL;DR (though you should definitely read) is that everything in a router needs to be inside a Route, you can’t have things being free like this.
    If it is some other library, like TanStack Router try to find their definition of routing.

    As it stands, your Redirect component is always being called, which is why you are always being redirected. It needs to be conditioned in a route.

    Login or Signup to reply.
  2. 0

    The code is unconditionally rendering the Redirect component. If you would like "/homepage" to be a sort of "default" route then the nested routes inside Layout/Suspense should also be wrapped in a Switch (the outer Switch will already be matching and rendering Layout) and the Redirect moved to the end of the Switch as a "catch-all" route to redirect users to "/homepage" if they weren’t trying to access any other route.

    Example:

    <Switch>
  <Route path="/login" component={Login} />
  <Route path="/otp" component={Otp} />
  <Layout>
    <Suspense fallback={<LayoutSplashScreen />}>
      <Switch>
        <ContentRoute path="/homePage" component={RequestTabel} />
        <ContentRoute path="/Register" component={RegisterPage} />
          ...
          ...
          ...
        <Redirect push to="/homePage" />
      </Switch>
    </Suspense>
  </Layout>
</Switch>

    If you want the app to redirect to "/homepage" when it mounts then add a useEffect hook to the first component under the router and issue an imperative redirect.

    Example:

    import { useHistory } from 'react-router-dom';

const App = () => {
  const history = useHistory();

  React.useEffect(() => {
    history.replace("/homepage");
  }, []);

  ... rest of the component code
};

    <BrowserRouter>
  <App />
</BrowserRouter>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search