CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
3gwebtrain
3gwebtrain

Reputation: 15303

Reactjs - How to re-direct to default home page

I am trying to set redirection to default page, but not works. what is the correct way to do this?

const routes = [
    {
        path:"/",
        component:Home,
        extract:"true",
        redirect:"/home"
    },
    {
        path:"/home",
        component:Home
    },
    {
        path:"/service",
        component:Service
    }
];

html:

<div>
  <Router>
    <Header />
       {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            component={route.component}
          />
                    ))}
   </Router>

Upvotes: 1

Views: 4438

Answers (1)

killshot13
killshot13

Reputation: 349

Assuming you are using react-router-dom, I can see one definitive issue with some additional concerns. You may only need to make one change, but I would advise reviewing the rest of your code to ensure the best routing config.

Main Issue: You have to add a redirect to '/home' if you want that component to be the first page to be loaded. This is because when the app is rendered, it sees the default path as '/'.

<Redirect exact from="/" to="/home" />
  <Route path="/home">
    <Home />
  </Route>

While this may solve your problem by itself, here is a more comprehensive solution that should be beneficial to compare your current code against.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import home from "./Home";
import service from "./Service";
import header from "./Header";

function App () {


    return (
      <div>
        <Router>
        <Header />
        <hr />
          <Switch>
            <Redirect exact from="/" to="/home" />
              <Route path="/home">
                <Home />
              </Route>
              <Route exact path="/service">
                <Service />
              </Route>
            </Switch>
          </Router>
        </div>
      );
    }


export default App;

As you can see, I would recommend moving the Header outside of the Switch statement and then applying the redirect from / to /home.

Also, please note this configuration is simply an example. It depicts a situation where you are exporting App as a component and does not account for login authorization, so certain aspects of your code may vary.

Upvotes: 2

Related Questions