sous-page ne 4

Question

Je correspond pas à réagir-routeur ma configuration du routeur comme celui-ci

<Switch> 
    <PrivatePage key={index} {...opts} component={(props) => 
    <Section {...props} pages={childRoutes} /> 
    } /> 
    <PrivatePage path='/accounts/:id' exact={true} render={({ match }) => (
    <Redirect to={/accounts/${match.params.id}/profile} /> 
)} /> 
    ... 
    <Route component={NotFound} /> 
</Switch> 

Et puis <Section />

<SubNavMenu /> 
<Route path=/accounts/:id/profile componet={ProfilePage} /> 
<Route path=/accounts/:id/dashboard componet={DashboardPage} /> 

Et puis <PrivatePage /> rend comme, tout <Page /> rend juste <Navigation /> {this.props.children}

const PrivatePage = ({ component: Component, ...rest }) => { 
    let result = props => (
    <Redirect 
     to={{ 
     pathname: '/redirect', 
     state: { from: props.location }, 
     }} 
    /> 
) 

    if (User.methods.isAuthed()) { 
    result = props => (
     <Page> 
     <Component {...props} /> 
     </Page> 
    ) 
    } else if (rest.path === '/') { 
    result = props => (
     <Redirect 
     to={{ 
      pathname: '/login', 
     }} 
     /> 
    ) 
    } 

    return <Route {...rest} render={props => result(props)} /> 
} 

export default PrivatePage 

---

En cliquant sur un lien qui me prend à accounts/:id me réoriente correctement sur la page de profil, mais lorsque je tente d'aller sur la page du tableau de bord de la SubNavMenu je reçois ma page NotFound et consolante this.props.match {path: "/", url: "/", params: {…}, isExact: false} mais mon chemin est /accounts/7kB7fRdsu39Be44ou/dashboard

Merci pour votre aide

---

par demande, code complet de l'article

pages = [ 
{ 
    authed: true, 
    icon: 'cog', 
    component: (<div/>), 
    name: 'AccountDetailSection', 
    path: `/accounts/:id/profile`, 
}, 
{ 
    authed: true, 
    component: AccountProfilePage, 
    exact: true, 
    getLink: id => `/accounts/${id}/profile`, 
    icon: 'cog', 
    label: 'Account', 
    name: 'AccountDetailProfile', 
    parent: 'AccountDetailSection', 
    path: `/accounts/:id/profile`, 
}, 
{ 
    authed: true, 
    component: AccountDashboardsPage, 
    exact: true, 
    getLink: id => `/accounts/${id}/dashboard`, 
    icon: 'cog', 
    label: 'Dashboard', 
    name: 'AccountDetailDashboards', 
    parent: 'AccountDetailSection', 
    path: `/accounts/:id/dashboard`, 
}, 
] 


class PrivateSection extends React.Component<IProps, IState> { 
    classes = { // static values 
    button: 'App-navigation--listItemButton', 
    container: 'App-navigation', 
    header: 'App-navigation--header', 
    headerLogo: 'App-navigation--headerLogo', 
    listContainer: 'App-navigation--list', 
    listItem: 'App-navigation--listItem', 
    listItemActive: 'App-subnavigation--listItem--active', 
    listItemHover: 'App-navigation--listItem--hover', 
    positionBottom: 'App-navigation--bottom', 
    positionTop: 'App-navigation--top', 
    } 
    sharedProps = { // static values 
    activeClass: this.classes.listItemActive, 
    buttonClass: this.classes.button, 
    buttonContainer: this.classes.listItem, 
    hoverClass: this.classes.listItemHover, 
    menuContainer: this.classes.listContainer, 
    onHover: this.handleMouseIn.bind(this), 
    } 

    constructor(props: IProps) { 
    super(props) 

    this.state = { 
     hovering: '', 
    } 
    } 

    handleMouseIn(name: string) { 
    this.setState({hovering: name}) 
    } 
    handleMouseOut() { 
    this.setState({hovering: ''}) 
    } 

    renderSubNav() { 
    const navOpts = { 
     hovering: this.state && this.state.hovering || '',  
     onHover: this.handleMouseIn.bind(this), 
    } 

    const navItems: any = this.props.pages.map(p => { // tslint:disable-line no-any 
     const o = {...p} 

     if (typeof(o.getLink) === 'function') { 
     const {id} = this.props.match && this.props.match.params || {id: ''} 

     o.link = o.getLink(id) 
     o.getLink = undefined 
     } 

     o.authed = undefined 
     o.exact = undefined 
     o.component = undefined 

     return {...navOpts, ...o} 
    }) 

    const submenuClasses = { 
     active: this.sharedProps.activeClass, 
     button: this.sharedProps.buttonClass, 
     buttonContainer: this.sharedProps.buttonContainer, 
     hover: this.sharedProps.hoverClass, 
     menuContainer: this.sharedProps.menuContainer, 
    } 

    return (
     <div 
     className='profile_subnav' 
     style={{height: '100%'}} 
     onMouseLeave={() => this.handleMouseOut()} 
     > 
     <Menu 
      items={navItems} 
      classes={submenuClasses} 
     /> 
     </div> 
    ) 
    } 
    renderContent() { 
    return (
     <div className='profile_content'> 
     {this.props.pages.map((opts, index) => { 
      const o: any = {...opts} // tslint:disable-line no-any 
      if (typeof(o.getLink) === 'function') { 
      const {id} = this.props.match && this.props.match.params || {id: ''} 

      o.link = o.getLink(id) 
      o.getLink = undefined 
      } 

      return (
      <PrivateRoute key={index} {...o}/> 
     ) 
     })} 
     </div> 
    ) 
    } 
    render() { 
    return (
     <div 
     className='page--content_container' 
     > 
     {this.renderSubNav()} 
     {this.renderContent()} 
     </div> 
    ) 
    } 
} 

export default PrivateSection 

---

méthode render de <Button /> (enveloppé par <Menu />

render() { 
    const { 
     activeClass, 
     containerClass, 
     exactLink, 
     hoverClass, 
     icon, 
     label, 
     link, 
     onClick, 
     handleActive, 
    } = this.props 

    let message = (
     <div className='Button--message'> 
     <div className='Button--messageText'>{label}</div> 
     </div> 
    ) 
    if (icon) { 
     message = (
     <div className='Button--message'> 
      <div className='Button--messageIcon'><Icon name={icon}/></div> 
      <div className='Button--messageText'>{label}</div> 
     </div> 
    )  
    } 

    const buttonContainerClass = this.isHovering() ? `${containerClass} ${hoverClass}` : containerClass 

    const ButtonContainer = props => (
     <button 
     {...props} 
     className={this.props.buttonClass || ''} 
     onMouseEnter={() => this.handleMouseIn()} 
     onMouseLeave={() => this.handleMouseOut()} 
     > 
     {message} 
     </button> 
    ) 

    let Result 
    if (typeof(link) === 'string') { 
     if (typeof(activeClass) === 'string' && activeClass.length > 0) { 
     const opts = { 
      activeClassName: activeClass || '', 
      className: buttonContainerClass || '', 
      exact: exactLink || false, 
      isActive: handleActive || undefined, 
      strict: true, 
      to: link, 
     } 

     Result = (
      <NavLink {...opts} > 
      <ButtonContainer /> 
      </NavLink> 
     ) 
     } else { 
     Result = (
      <Link to={link} className={buttonContainerClass}> 
      <ButtonContainer /> 
      </Link> 
     ) 
     } 

    } else if (typeof(onClick) === 'function') { 
     Result = (
     <div className={buttonContainerClass}> 
      <ButtonContainer onClick={() => onClick()} /> 
     </div> 
    ) 

    } else { 
     console.warn('Button must have an action props> ', {props: this.props}) 
    } 

    return Result 
    } 

Answer 1

J'ai eu un problème similaire une_option n'a pas été de trouver des routes qui ont été enveloppées avec d'autres composants. En regardant la source, il semble Switchpas chercher Route s dans les enfants récursivement, de sorte qu'ils ne peuvent pas être imbriqués.

Dans ce cas, pour utiliser Switch, vous devez refactoriser pour que Route soit le composant de niveau supérieur pour chaque itinéraire. Ou refactoriser de ne pas utiliser Switch - faire toutes les routes correspond, essentiellement.

source de commutateur: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js Il utilise React.Children.forEach de chercher des chemins, dont seulement itère sur les immédiats des enfants, pas d'enfants imbriqués.