React-Router-4-Routing von einer anderen Komponente

Question

Kann eine Komponente von einer anderen Komponente weitergeleitet werden?

Also normalerweise wäre es wie unten

<NavLink to="/link">link</NavLink> 
<NavLink to="/anotherLink">link </NavLink> 
<Switch> 
    <Route exact path="/link" component={linkComponent}/> 
    <Route path="/anotherLink" component={anotherLinkComponent}/> 
</Switch> 

getan werden, aber ist es möglich, NavLink in einer Komponente zu haben, die in der Hauptkomponente dann den Weg vom Hauptkomponente geladen wird? So haben NavLink in einer Komponente und Route in der Hauptkomponente.

Die Nav Komponente

export default class Nav extends Component { 
    render() { 
     return (
      <nav className="navigation"> 
       <ul className="nav-container"> 
        <li> 
         <NavLink to="/" className="nav-title"> 
          First Page 
         </NavLink> 
        </li> 
        <li> 
         <NavLink to="second-page" className="nav-title"> 
          Second Page 
         </NavLink> 
        </li> 
        <li> 
         <NavLink to="third-page" className="nav-title"> 
          Third Page 
         </NavLink> 
        </li> 
       </ul> 
       <div className="nav-decoration"> 

       </div> 
      </nav> 
     ) 
    } 
} 

Die Komponente App

import Nav from 'whateverthepath'; 

export default class App extends Component { 

    render() { 
     return (
      <div> 
       <Nav/> 
       <Switch> 
        <Route exact path="/" component={Firstpage}/> 
        <Route path="/secondpage" component={Secondpage}/> 

       </Switch> 
      </div> 
     ) 
    } 
} 

die alle geeigneten React Importe

getan

Answer 1

Das ist auf jeden Fall möglich, und Ihr Beispiel sollte auch funktionieren, wie ist. Die größte Sache, die Sie sicherstellen müssen, ist, dass Ihre <Route> s als ein Punkt gerendert wurden. Der Grund dafür, dass Ihr Beispiel funktioniert, ist, dass Sie <Nav> in derselben render() - Methode wie Ihre <Switch>-Anweisung rendern. Wenn Sie stattdessen <Nav> nur rendern würden, ohne die switch-Anweisung zu rendern, würden Sie die NavLinks an einen Ort bringen, über den React Router nicht informiert wurde. Das ist typisch, warum Ihre <Route> s fast immer in Ihrer übergeordneten Komponente enthalten sind, um sicherzustellen, dass sie gerendert werden.