CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
Wordpressor
Wordpressor

Reputation: 7553

React-router - redirect on load?

I'm new to React development and I'm not sure how to handle this.

I have a simple app with routes, it looks like this:

<Router>
    <div>
      <Route path="/" component={MainComponent} />
      <Route path="/dashboard" component={DashboardComponent} />
      <Route path="/users" component={UsersComponent} />
      <Route path="/admin" component={AdminComponent} />
    </div>
</Router>

When I go to localhost:3000/myApp/index.html my MainComponent loads as expected, it holds main layout of the site, navigation and so forth.

Then I have to click on "Dashboard" to switch to DashboardComponent, "Users" to move to UsersComponent and "Admin" to load AdminComponent, these are loaded next to the navigation from MainComponent.

So it goes like this:

localhost:3000/myApp = MainComponent 
localhost:3000/dashboard = MainComponent + DashboardComponent
localhost:3000/users = MainComponent + UsersComponent
localhost:3000/admin = MainComponent + AdminComponent

What I want to achieve is to never load MainComponent alone (as it holds nothing excepting navigation), but load DashboardComponent with it, so everything will work as before with a slight change:

localhost:3000/myApp = MainComponent + DashboardComponent

So I guess I want to load my MainComponent and then dashboard on init. It'd be very nice if the URL changes automagically from index.html to /dashboard too.

I tried doing something like this in my MainComponent.jsx:

componentWillMount() {
  <Redirect to="/dashboard" />
  console.log("It works!");
}

But it does nothing, I think the router from first example in Application.jsx just overrides it.

I think I might be doing something wrong because I feel like it's one of the most basic things with router but I can't find any answers and anything in documentation that would help me here. Any hints?

tl;dr I want localhost:3000/myApp/index.html to redirect me localhost:3000/dashboard when app starts (I think it should be enough for router to load what the right component).

Rerouting does nothing (there are no errors, but the route is not changing):

    <Router>
        <div>
          <Route path="/" component={MainComponent} />
          <Route path="/dashboard" component={DashboardComponent} />
          <Route path="/users" component={UsersComponent} />
          <Route path="/admin" component={AdminComponent} />
          <Route exact path="/" component={ () => <Redirect to={DashboardComponent} /> } />
        </div>
    </Router>

Upvotes: 3

Views: 20432

Answers (1)

Dan Mason
Dan Mason

Reputation: 2337

You should wrap your routes with the MainComponent and wrap in Switch and allow '/' to show DashboardComponent

<Router history={history}>
  <MainComponent>
    <Switch>
      <Route exact path="/" component={DashboardComponent} />
      <Route exact path="/dashboard" component={DashboardComponent} />
      <Route exact path="/users" component={UsersComponent} />
      <Route exact path="/admin" component={AdminComponent} />
    </Switch>
  </MainComponent>
</Router>

Or if you do not want '/' to show the dashboard then you would use Redirect:

<Router history={history}>
  <MainComponent>
    <Switch>
      <Redirect exact from="/" to="/dashboard" />
      <Route exact path="/dashboard" component={DashboardComponent} />
      <Route exact path="/users" component={UsersComponent} />
      <Route exact path="/admin" component={AdminComponent} />
    </Switch>
  </MainComponent>
</Router>

Please Note: You will need to put this.props.children in the render method of MainComponent.

Alternatively, you could put the <Switch>...</Switch> inside your MainComponent:

Router

<Router history={history}>
  <Switch>
    <Redirect exact from="/" to="/dashboard" />
    <MainComponent />
  </Switch>
</Router>

MainComponent

class MainComponent extends React.Component {
    ...

    render() {

      return <span>
          //Navigation content here....

        <Switch>
          <Route exact path="/dashboard" component={DashboardComponent} />
          <Route exact path="/users" component={UsersComponent} />
          <Route exact path="/admin" component={AdminComponent} />
        </Switch>
      </span>

    }

}

Useful Links:

Upvotes: 10

Related Questions