プロジェクトの進行中、管理Hostingのページとユーザーが見た2つのページは全く異なり、各機能には共通のNavとFooterがあることが分かった.私が前にやったのは、ページ全体に共通のNav、Footerなどのコンポーネントがありましたが、今ではAyeduモードが異なる必要があります.私はしばらく検索してどうすればいいかを探して、以下の方法で応用して、ウェブサイト内の2つのモードを実現しました.

1. Router.jsを2つのモードに作成します。

(user/)後の表示は、後で他の内容を貼り付ける可能性があります.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Hosting from './pages/Hosting';
import User from './pages/User';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/*" element={<User />} />
        <Route path="/hosting/*" element={<Hosting />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

2.<User/>、<Hosting/>コンポーネントを作成したら、Routerを入れます!

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Nav from '../components/Nav/Nav';
import LoginSignup from '../components/Nav/Modal/LoginSignup';
import Main from './Main';
import Staydetail from './Staydetail';
import Staylist from './Staylist';
import Footer from './../components/Footer';

const Customer = () => {
  return (
    <>
      <Nav />
      <LoginSignup />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/staylist" element={<Staylist />} />
        <Route path="/staydetail" element={<Staydetail />} />
      </Routes>
      <Footer />
    </>
  );
};

export default Customer;

以上のように、Routerは完全に2つのモードで管理できます!3個4個以上でよろしいでしょうか?😝

反応ルータの公式ドキュメントを参照してください。🙂

やはり見つかった問題の解決策は公式文書に!
React Router