react:スイッチの基本的な使い方、ページ構成コンポーネントが見つかりません

V 5の場合はSWICHを使用し、V 6の場合はRoutesに変更します.
👉 v5

<Switch>
  <Route path="/" exact element={Home} />
  <Route path="/about" exact element={About} />
</Switch>

👉 v6

<Routes>
  <Route path="/" exact element={<Home />} />
  <Route path="/about" exact element={<About />} />
</Routes>

個人的にはV 5の直感性も大好きです.
デフォルトのアプリケーション.jsでルーティングを構成する場合、swichで包むと、ルーティング機能をより実用的に使用できます.

スイッチ

ルートを囲む構造を用いて,アクセス順を上から下へ行う.
見つからないページに警告したい場合は、下部にpathのないcomponentを設定するだけです.

import { BrowserRouter, Route, Switch } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import NotFound from "./pages/NotFound";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

👉 設定されていないパスが表示されると、最後にルーティングされた画面が表示されます.