【React】【codeSandBox】import/exportエラーが解消されません

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• [ ] codeSandBox上でページ遷移するコードを実装したい

前提

コンポーネント間の画面遷移ができるwebサイトを作成したいと考えています。
React v18に則って、createRootを用いて出力します。
codeSandBox上で作成しています。
TypeScriptは使用していません。

発生している問題・エラーメッセージ

「Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.」
Check the render method of `App`.

上記のエラーが発生しています。
Appのレンダーメソッドを確認してとのことなので、そのあたりを確認しているのですがわかりません。

該当のソースコード

import { BrouwserRouter, Switch, Route } from "react-router-dom";

import { Top } from "./pages/Top";
import { About } from "./pages/About";
import { Header } from "./components/Header";

export const App = () => {
  return (
    <BrouwserRouter>
      <Header />
      <Switch>
        <Route exact path="/">
          <Top />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </BrouwserRouter>
  );
};

試したこと

インポート/エクスポートに関するエラーについて
import/export周りに間違いがあるのかと現在調査しています。

補足情報（FW/ツールのバージョンなど）

• react 18.2.0
• react-dom 18.2.0
• react-router-dom 6.8.2
• react-scripts 4.0.0

かなり根本的な部分で間違いを犯していると思うのですが、
何卒ご教示の程よろしくお願いします。

Comments

[hoshi-takanori]

react router の使い方が古いような…。
https://qiita.com/seal_qiita/items/63fc7358d90de825ccc8

[s-ueshi]

v6からの変更点、抑えられていませんでした、、、
ありがとうございます！
まだ解決には至っていないのですが、一個ずつ確認しながら探っていきます！

Answer 1

■原因
react-router-domのBrowserRouterのスペルが誤っているため、インポートできていないのではないでしょうか

■対応
誤

import { BrouwserRouter, Switch, Route } from "react-router-dom";
<BrouwserRouter>

↓
正

import { BrowserRouter, Switch, Route } from "react-router-dom";
 <BrowserRouter>

■補足
こちらすでに行なっているかもしれないですg、
createRootを使用しているため、以下のようにReactDOM.renderではなく、ReactDOM.createRootを使用する必要があるかと思います

import ReactDOM from "react-dom";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Comments

[s-ueshi]

情けないことにスペルを正したことでしっかり読み込まれました。
ありがとうございます！
質問を通して新たに得られた知識を今後の勉学に活かしていこうと思います。