Wie erhalten Sie falsche Standortpfadnamen in React Router, wenn Sie die Komponente <Router> verwenden?

Question

Sagen Sie bitte Struktur haben Ihre App auf diese Weise mit reagieren-Router reagieren:

const rootRoute = { 
    childRoutes: [ { 
     path: '/', 
     component: require('./components/Layout'), 
     childRoutes: [ 
      require('./routes/HelloBeautiful'), 
      require('./routes/GreetingsEarthlings'), ... (etc.) 
     ] 
    }] 
} 

ReactDOM.render(
    <Provider store={store}> 
     <Router history={browserHistory} 
       routes={rootRoute}>  
     </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

Sie wollen den Benutzer auf die HelloBeautiful Route umzuleiten, wenn sie auf eine der Strecken, die nicht in den rootRoute-Konstante angegeben zu gehen versuchen, childRoutes.

Sie können eine Überprüfung innerhalb von componentWillReceiveProps oder componentDidUpdate in Ihrer Layout.js implementieren, um die Standortrequisiten mit der Masterliste der untergeordneten Routen zu vergleichen, aber das erscheint mühsam.

Was machen Sie? Die anderen verwandten Fragen, die ich diesbezüglich fand, betrafen einen anderen Reaktiv-Router-Stil mit der Komponente.

---

EDIT:

implementiert @stkvtflw ‚s Antwort wie folgt aus:

Layout.js machen:

render() { 
    return (
     <div> 
      {this.props.children || <Welcome/>} 
     </div> 
    ) 
} 

index.js rootRoute

const rootRoute = { 
     childRoutes: [ { 
      path: '/', 
      component: require('./components/Layout'), 
      childRoutes: [ 
       require('./routes/HelloBeautiful'), 
       require('./routes/GreetingsEarthlings'), //... (etc.) 
       { path: '*' } // don't need to require a component here 
      ] 
     }] 
    } 

Welcome.js componentDidMount:

componentDidMount() { 
    browserHistory.push('/hellobeautiful') 
} 

nicht brauchen, um eine pagenotfound Komponente erstellt werden, da das gewünschte Verhalten nur die Umleitung auf einen fehlerhaften Link ist.

Answer 1

Versuchen Sie, eine Route mit * Pfad hinzuzufügen.

const rootRoute = { 
    childRoutes: [ { 
     path: '/', 
     component: require('./components/Layout'), 
     childRoutes: [ 
      require('./routes/HelloBeautiful'), 
      require('./routes/GreetingsEarthlings'), ... (etc.) 
     ] 
    }, 
    ... 
    { 
     path: '*', 
     component: require('./components/NotFoundPage'), 
    }] 
}