リアクタルータv4ネストされたルートとスイッチ

Question

以下を実行しようとしても動作しません。

ReactDOM.render(
    <Router> 
    <div className="route-wrapper"> 
     <Switch> 
     <App> 
      <Route exact path="/" component={HomePage} /> 
      <Route path="/user" component={UserPage} /> 
     </App> 
     <Route component={Err404} /> 
     </Switch> 
    </div> 
    </Router>, 
    document.getElementById('main') 
) 

ドキュメントには、スイッチ要素内でルート要素とリダイレクト要素のみが許可されていると記載されているため。アプリケーションでHomePageとUserPageを明示的に折り返したり、エラーページをアプリケーションでラップしたりすることなく、これを動作させるにはどうすればよいですか？

Answer 1

私は「ユニバーサルリアクションアプリ」を開発し始めましたが、サーバーサイドのレンダリングで最初のページの読み込みが行われていましたが、React-Routerが4.0に更新されたばかりの同様の問題に直面しました。あなたは、下記の通り、あなたのアプリケーションに何かを再編検討する必要があります。

ReactDOM.render(
    <Router> 
    <div className="route-wrapper"> 
     <Switch> 
     <Route path="/" component={App} /> 
     <Route component={Err404} /> 
     </Switch> 
    </div> 
    </Router>, 
    document.getElementById('main') 
) 

アプリケーションコンポーネントは、次のようにリファクタリングされ

：

class App extends React.Component { 
    render() { 
    return <div> 
     <Switch> 
     <Route exact path="/" component={HomePage} /> 
     <Route exact path="/user" component={UserPage} /> 
     </Switch> 
    </div>; 
    } 
}