サブページが反応し、ルータ一致していない4

Question

私が持っているように私のルータの設定この

<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> 

そして<Page />がちょうど<Navigation /> {this.props.children}

をレンダリングしながら <Section />

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

そして<PrivatePage />は、のようなレンダリング

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 

---

適切プロフィールページに私をリダイレクトする accounts/:idに私がかかりますが、私はSubNavMenuからダッシュボードページに移動しようとしたとき、私は私のNOTFOUNDページを取得し、this.props.match {path: "/", url: "/", params: {…}, isExact: false}を慰めたが、私のパスは /accounts/7kB7fRdsu39Be44ou/dashboard

あるリンクをクリックする

は、セクションのリクエストごと

---

、完全なコードをあなたの助けをありがとう

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 

---

は、私はスイッチは、他のコンポーネントでラップされたルートを見つけることはなかった同様の問題があった<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

に包ま<Button />（の方法をレンダリングします。ソースを見ると、Switchはではなく、のように見えます。子では再帰的にRouteを探します。したがって、入れ子にすることはできません。

その場合、Switchを使用するには、Routeを各経路の最上位コンポーネントにするためにリファクタリングする必要があります。またはリファクタリングを使用しないSwitch - すべてのルートをexactと一致させる、基本的に。

ソース切替：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js それは即時子供ではなく、ネストされた子どもたちの上にこれだけ反復し、パスを探すためにReact.Children.forEachを使用しています。