編集1: 元の質問: React
を使用してシングルページ アプリケーションを作成する方法質問は十分に具体的ではなく、以前に回答されているため、Imran Rafiq Botherの回答からReact-routingを学ぶ必要があります
編集2: 質問を書き直して、より具体的な使用例のために再度質問します。
私はチュートリアルに従って、React-route を使用してページをルーティングする方法を学習しています。これまでのところ、createBrowserRouter() コンポーネントの createRoutesFromElements 関数内に <Route> タグを追加する必要があることがわかりました。コードは次のとおりです:
リーリー各「要素=」には、モジュール形式で作成されたページがインポートされます。内容は次のとおりです。
チュートリアルの RootLayout.js
リーリーJSX React Bootstrap によって作成された古いコンポーネントがある場合、コードは次のようになります。
NavbarLayout.js リーリー
この場合、ルーティングは次のようになります:リーリー
コンポーネントがページに表示されず、エラーも発生しないのはなぜですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
JS コンポーネントを通常の
リーリーindex.htmlファイルに配置しようとしています。これはまったく当てはまりません。 ReactJS のようなライブラリを使用して、内部的には JavaScript である
ReactDOM.render(<App/>, document.querySelect('#root'))ライブラリですべての基礎作業を行いました。したがって、この場合、単一ページ アプリケーションとは、id='root' を持つ要素を使用し、その要素にすべてのコードを配置することを意味します。したがって、これは正しいアプローチではありません。この方法で単一ページのアプリケーションを起動しても、その後の問題は言うまでもなく、機能しません。