React Router V4 - Warning: You tried to redirect to the same route you're currently on: "/home/dashboard"

Question

I am getting this error tried different ways of routing still no luck.

I have route config file i.e route.js

const Root = ({ store }) => (
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Route path='/' component={ App }/>  
            </div>
        </BrowserRouter>
    </Provider>
)

Now at App.js

class AppComp extends Component {
    render() {
        const {match} = this.props;
        let navClass = 'active';

        if(this.props.sideClass === "nav-ssh") {
            navClass = "active-ssh"; 
        }

        return (
            <div>
                <div className="container">
                    <div className="main">
                        <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
                        <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
                        <Redirect to="/home/dashboard" />s
                    </div>
                </div>
            </div>
        );
    }
}

I want to load app always so put it in the highest level and header and sidenav should also gets loaded always so they are inside app.

For any unknown path and for first time load I redirected to /home/dashboard

I understand it must be coming to / twice so this warning.

How can I configure my router to achieve the same and resolve the warning.

Any help would be greatly appreciated.

Answer 1

Use <Switch>, instead of <div> to wrap the routes.

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import { LoginScreen, LogoutScreen } from './components'

export default () => (
  <div>
    <Router>
      <Switch>
        <Route path='/login' component={LoginScreen}/>
        <Route path='/logout' component={LogoutScreen}/>
        <Route component={AuthenticatedRoutes}/>
      </Switch>
    </Router>
  </div>
)

Answer 2

Even I faced similar issue. It was resolved to me when I added exact in Route.Switch also must be added.

<Switch>
  <Route exact path='/' component={ App }/> 
</Switch> 

Answer 3

I resolved the issue. Here's a solution.

route.js

<Provider store={store}>
  <BrowserRouter>
    <div>
      <Route path="/" component={ App }/>
    </div>
  </BrowserRouter>
</Provider>

At App.js add a check match.url === window.location.pathname which is always true for initial rendering so '/' redirects to '/home/dashboard'. Adding this condition resolves the redirect warning.

class AppComp extends Component {
  render() {
    const {match} = this.props;
    let 
        shouldRedirect = match.url === window.location.pathname, 
        redirectTo = <Redirect to="/home/dashboard" />;
    let navClass = 'active';
    if(this.props.sideClass === "nav-ssh") {
      navClass = "active-ssh"; 
    }
    return (
      <div>
        <div className="container">
          <div className="main">
            <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
            <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
            {shouldRedirect && redirectTo}
          </div>
        </div>
      </div>
    );
  }
}

But you will have a limitation now, if user enters some unknown path then it won't redirect to '/home/dashboard' i.e to our default route.

To overcome that limitation you have to add :

<Switch>
  {/*---- your additional routes goes here -----*/}
  <Redirect to="/home/dashboard" />
</Switch>

Add the above code to the components from where you handle rest of the routing. For example for me I have added to Sidenav component.

Answer 4

I guess you would configure your Routes like

<Provider store={store}>
    <BrowserRouter>
        <div>
            <Route path="/" component={ App }/>
        </div>
    </BrowserRouter>
</Provider>

and App.js as

class AppComp extends Component {
    render() {
        const {match} = this.props;
        let navClass = 'active';

        if(this.props.sideClass === "nav-ssh") {
            navClass = "active-ssh"; 
        }

        return (
            <div>
                <div className="container">
                    <div className="main">
                        <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
                        <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
                       <Switch>
                            <Route path='/home/dashboard' component={ Dashboard }/>

                             <Redirect to='/home/dashboard'/>
                       </Switch>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 5

Had this same issue - was trying to redirect but was getting an error and I believe all you need is switch:

<Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
  <Switch>
    <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
    <Redirect to="/home/dashboard" />
  </Switch>
</Route>