ネストされたルートが動作しないのはなぜですか？ ReactRouter4

Question

私のアプリにreact-routerv4を使用しています。ここに私ですroutes.js：

const routes = (
    <Route 
     path="/" 
     render={props => (
     <App> 
      <Switch> 
      <Route exact path="/" component={Home} /> 
      <Route path="/org/:slug" component={Org} /> 
      <Route exact path="/test" component={Test} /> 
      <Route exact path="*" component={Error.NotFound} /> 
      </Switch> 
     </App> 

    )} 
    /> 
); 

すべてのルートが正常に動作します。 Orgコンポーネントでは、私はルートの別のセットがあります。

export default() => (
    <LookUp> 
    <Switch> 
     <Route path="/login" component={LogIn} /> 
     <Route path="/create-account" component={CreateAccount} /> 
     <Route path="/request-password" component={Auth.Request} /> 
     <Route path="reset-password" component={Auth.Reset} /> 
    </Switch> 
    </LookUp> 
); 

を私は非常に簡単ですLookUpコンポーネントでrender機能を打っています：

render() { 
    return <div>{this.props.children}</div> 
} 

私はレンダリングにブレークポイントを置くことができます機能はchildrenを参照してください。 Switch子はの4つすべてがSwitchの子として存在しますが、私はOrgファイル内のいずれのルートにもルーティングしません。私は間違って何をしていますか？

Answer 1

簡単です。 Orgの2番目の<Switch>は、アドレスが/org/の場合にのみレンダリングされます。そうでないと、これらのルートはまったく表示されず、したがって使用できなくなります。

あなたのようなURLをレンダリングしたい場合

/ORG /ログイン、/ ORG /アカウントを作成して、その上、あなたは {match.url}

<Route path={match.url + '/login'} component={LogIn} /> 

を使用するように持っているか、あなたは/ログインを使用したい場合は、/作成-account .../org/prefixなしの場合、これらのルートを内部に入れることはできません/org/:slugルート