React Router V4 - Warnung: Sie haben versucht, auf die selbe Route umzuleiten, auf der Sie gerade sind: "/ home/dashboard"

Question

Ich bekomme diesen Fehler versucht, verschiedene Wege des Routing noch kein Glück.

Ich habe Route Konfigurationsdatei dh route.js

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

Jetzt bei 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> 
     ); 
    } 
} 

ich app will immer laden, so legt es auf der höchsten Ebene und Kopf- und sidenav sollte wird auch immer geladen, so dass sie in App sind.

Für jeden unbekannten Weg und für die erste Zeit Last I/home/Armaturenbrett

weitergeleitet verstehe ich es/zweimal so diese Warnung kommen werden müssen.

Wie kann ich meinen Router konfigurieren, um das gleiche zu erreichen und die Warnung zu lösen.

Jede Hilfe würde sehr geschätzt werden.

Answer 1

Ich denke, Sie Ihre Routen wie

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

und App.js als

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 2

ich das Problem behoben konfigurieren würde. Hier ist eine Lösung.

route.js

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

Bei App.js einen Scheck match.url hinzufügen === window.location.pathname, die für die anfängliche Rendering immer wahr ist, so '/' Umleitungen an ‚/ home/Armaturenbrett ". Das Hinzufügen dieser Bedingung behebt die Umleitungswarnung.

class AppComp extends Component { 
    render() { 
     const {match} = this.props; 
     let shouldRedirect = match.url === window.location.pathname; 
     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> 
     ); 
    } 
} 

Aber Sie werden jetzt eine Einschränkung haben, wenn der Benutzer einen unbekannten Pfad betritt, dann wird es nicht zu ‚/ home/Armaturenbrett‘ heißt auf unsere Standardroute umgeleitet werden.

Um diese Einschränkung zu überwinden Sie hinzufügen:

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

Fügen Sie den obigen Code zu den Komponenten, von wo aus Sie Rest des Routing behandeln. Zum Beispiel für mich habe ich zu Sidenav Komponente hinzugefügt.