React ページに JSX をインポートしてナビゲーション バーを作成する

Question

編集1: 元の質問: React

を使用してシングルページ アプリケーションを作成する方法

質問は十分に具体的ではなく、以前に回答されているため、Imran Rafiq Botherの回答からReact-routingを学ぶ必要があります

編集2: 質問を書き直して、より具体的な使用例のために再度質問します。

私はチュートリアルに従って、React-route を使用してページをルーティングする方法を学習しています。これまでのところ、createBrowserRouter() コンポーネントの createRoutesFromElements 関数内に <Route> タグを追加する必要があることがわかりました。コードは次のとおりです:

リーリー

各「要素=」には、モジュール形式で作成されたページがインポートされます。内容は次のとおりです。

チュートリアルの RootLayout.js

リーリー

JSX React Bootstrap によって作成された古いコンポーネントがある場合、コードは次のようになります。

NavbarLayout.js リーリー

この場合、ルーティングは次のようになります:

リーリー

コンポーネントがページに表示されず、エラーも発生しないのはなぜですか?

Answer 1

JS コンポーネントを通常の index.html ファイルに配置しようとしています。

リーリー

これはまったく当てはまりません。 ReactJS のようなライブラリを使用して、内部的には JavaScript である ReactDOM.render(<App/>, document.querySelect('#root')) ライブラリですべての基礎作業を行いました。したがって、この場合、単一ページ アプリケーションとは、id='root' を持つ要素を使用し、その要素にすべてのコードを配置することを意味します。

したがって、これは正しいアプローチではありません。この方法で単一ページのアプリケーションを起動しても、その後の問題は言うまでもなく、機能しません。