React Router verschachtelte Routen werden nicht gerendert

Question

Ich versuche, die Nav-Komponente zusammen mit beliebigen Seiteninhalt auf diese Weise zu rendern, weil ich auf this.props.location in Nav zugreifen möchte (um aktive Position in Nav-Leiste hervorzuheben), also zugewiesen haben "/" route und übertrage die Child-Routen, anstatt sie einfach zu rendern. Es wird jedoch nur die Nav-Komponente gerendert. Keine Komponenten von anderen Routen werden auf irgendeiner Seite gerendert, da {this.props.children} in Nav anscheinend nicht definiert ist. Ich bin neu zu Reagieren, also wäre jede Hilfe großartig.

App.tsx:

const landingPage =() => { 
    if (Auth.isUserAuthenticated()) { 
    return (
     <UserProfile/> 
    ); 
    } else { 
    return (
     <Landing /> 
    ); 
    } 
}; 

const routes =() => { 
    return (
    <Route path="/" component={Nav}> 
     <Route path="/" component={landingPage}/> 
     <Route path="/login" component={LoginForm}/> 
     <Route path="/register" component={RegistrationForm}/> 
     <Route path="/logout" component={Logout}/> 
     <Route path="/about" component={About}/> 
    </Route> 
) 
} 

class App extends React.Component<{}, null> { 
    render() { 
    return (
     <BrowserRouter> 
     {routes()} 
     </BrowserRouter> 
    ); 
    } 
} 

Nav.tsx

class Nav extends React.Component<any, any> { 
    constructor() { 
    super(); 
    }; 

    linkActive = (link) => { 
    return this.props.location.pathname.includes(link); 
    }; 

    logInOut =() => { 
    if (!Auth.isUserAuthenticated()) { 
     return (
     [ 
      <NavItem active={this.linkActive("login")} href="/login">Login</NavItem>, 
      <NavItem active={this.linkActive("register")} href="/register">Register</NavItem> 
     ] 
    ); 
    } else { 
     return (
     <NavItem eventKey={"logout"} href="/logout">Logout</NavItem> 
    ); 
    } 
    }; 

    render() { 
    return (
     <div> 
     <Navbar className="fluid collapseOnSelect"> 
      <Navbar.Collapse> 
      <Navbar.Header> 
       <Navbar.Brand> 
       <a href="/">Home</a> 
       </Navbar.Brand> 
       <Navbar.Toggle /> 
      </Navbar.Header> 
      <BootstrapNav> 
       <NavItem active={this.linkActive("about")} href="/about">About</NavItem> 
      </BootstrapNav> 
      <BootstrapNav pullRight> 
       {this.logInOut()} 
      </BootstrapNav> 
      </Navbar.Collapse> 
     </Navbar> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

Answer 1

Nav.tsx Komponente

Sie verwenden react-router v4 wenn ich mich nicht täusche.

Ich möchte in der Lage sein, den Zugriff auf this.props.location in Nav ( aktive Position auf Navigationsleiste markieren), haben sie so zugeordnet „/“ Route und vorbei Kind Routen anstatt es einfach zu machen .

Um this.props.location, this.props.history oder this.props.match Verwendung withRouter höhere Ordnung Komponente zuzugreifen.

Zuerst importieren wir withRouter HOC.

import { withRouter } from 'react-router-dom'; 

Um es zu nutzen mit withRouter Ihre Nav Komponente wickeln.

// example code 
export default withRouter(Nav); 

---

App.tsx Komponente

Ihre Routen reorganisieren. Ich schlage vor, Switch zu verwenden.

// We are still using BrowserRouter 
import { 
    BrowserRouter as Router, 
    Switch, 
} from 'react-router-dom'; 

<Router> 
    <Switch> 
    <Route path="/" component={landingPage}/> 
    <Route path="/login" component={LoginForm}/> 
    <Route path="/register" component={RegistrationForm}/> 
    <Route path="/logout" component={Logout}/> 
    <Route path="/about" component={About}/> 
    </Switch> 
</Router> 

In Ihrem App.tsx Methode machen Sie an der Spitze hinzufügen nav kann.

Lassen Sie uns so tun, nur authentifizierte Benutzer können Nav Komponente sehen. In Ihrem Fall müssen Sie nicht auf this.props.children zugreifen.

renderNav() { 
    return (this.props.authenticated) ? <Nav /> : null; 
} 

render() { 
    return (
    <div> 
     {this.renderNav()} 
     <Router> 
     <Switch> 
      <Route path="/" component={landingPage}/> 
      <Route path="/login" component={LoginForm}/> 
      <Route path="/register" component={RegistrationForm}/> 
      <Route path="/logout" component={Logout}/> 
      <Route path="/about" component={About}/> 
     </Switch> 
     </Router> 
    </div> 
); 
} 

Wenn Sie mehr erfahren möchten über react-router v4 lesen Sie diese Beispiele, Anleitungen und apis auf react-training. Hoffe das hilft dir!