リアクタルータv4ネストされたルート相対パス

Question

私はリアクタルータv4とコンポーネントを持っていますが、もう一方のコンポーネントを別のルートに追加したいと思います。

これはメインルートである：

const Dashboard =() => { 
    return (
    <div> 
     <Header/> 
     <Router> 
     <div> 
      <Route path="/" exact component={Wall} /> 
      <Route path="/challenge/:id" component={Challenge} /> 
     </div> 
     </Router> 
    </div> 
) 
} 

と、これはチャレンジコンポーネントです：

class Challenge extends Component { 
    ... 

    render() { 
    return (
     ... 
     <Router> 
      <div> 
      <Route path="/overview" exact component={Overview} /> 
      <Route path="/discussions" exact component={Discussions} /> 
      </div> 
     </Router> 
     ... 
    ) 
    } 
} 

と、これは私のために働いていません。..

で働く唯一のオプションチャレンジコンポーネント内に/ challenge /：idを含める：

<Route path="/challenge/:id/overview" exact component={Overview} /> 
<Route path="/challenge/:id/discussions" exact component={Discussions} /> 

私は例えば、このようなルートの外観を作りたい最終的に

：

www.site.com/challenge/1/overview

www.site.com/challenge/1/discussions

しかし、それぞれのネストされたルート内に完全なルートは含まれていません。

Answer 1

あなたChallengeコンポーネントでこれを試してください：あなたはChallengeコンポーネントとして新しいRouterインスタンスを追加する必要はありません

class Challenge extends Component { 
    ... 

    render() { 
    const { match } = this.props; 
    return (
     ... 
     <div> 
     <Route path={`${match.url}/overview`} exact component={Overview} /> 
     <Route path={`${match.url}/discussions`} exact component={Discussions} /> 
     </div> 
     ... 
    ) 
    } 
} 

注意はあなたのトップレベルDashboardで定義されてRouterインスタンスの子孫であります成分。