質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

6504閲覧

React-Router V6でuseNavigate利用時のBrowserRouterの適切な位置と影響範囲が分かりません。

HALUO

総合スコア28

Router

Routerは、異なるネットワーク同士を相互に接続するための通信機器。インターネットでのデータを自動的に振り分け、一つのインターネット回線を複数のコンピュータで使用することが可能です。DHCPによりIPアドレスを自動的に割振りすることもできます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/01/19 02:05

React-Router V6に更新したのですが、useNavigateはRouterを使わないとダメだと言われたので、
利用箇所をRouterで囲ったのですが、下記エラーが取れず困っております。
タイトルの通り不明点はRouterをどこに設定するかになります。

**Uncaught Error: useNavigate() may be used only in the context of a <Router> component.
**

ヘッダーのメニュー部分で認証画面に飛ばしたいので、ヘッダー関連のindex.tsx内でuseNavigateを使う
HeaderMenuをRouterで囲みましたがダメで、menu.tsxも囲ってみましたが変化ありませんでした。

index.tsx const Header: FC<Props> = ({ openDialog }) => { const [open, setOpen] = useState(false); return ( <header css={wrapperStyle}> <a css={anchorStyle} href="/lp.html"> <img css={imageStyle} src="/images/logo_white.png" /> </a> <div css={menuStyle}> <button css={menuButtonStyle} onClick={() => { setOpen(true); }} > <i className="material-icons" css={menuIconStyle}> menu </i> </button> <BrowserRouter> {open ? ( <HeaderMenu onClick={setOpen} openDialog={openDialog} /> ) : null} </BrowserRouter> </div> </header> ); };
menu.tsx import { useNavigate, BrowserRouter as Router, Routes } from "react-router-dom";   ・   ・   ・ const navigate = useNavigate(); const handleOnClickMoveLogin = () => { navigate("auth/home"); }; return ( <Router> <Routes> <ul css={menuStlye}> <li css={menuListStyle}> <button css={menuButtonStyle} onClick={handleOnClickCreateRoom}> フライト作成 </button> <button css={menuButtonStyle} onClick={handleOnClickMoveLogin}> ログイン/サインイン </button> <button css={menuButtonStyle}>フライト検索</button> <button css={menuButtonStyle}>マイページ</button> <button css={menuButtonStyle}>プレミアム</button> </li> </ul> </Routes> </Router> ); };

そもそもソースコード全体に影響するのかと思い、上記箇所のRouterも含め削除しmain.tsxのみBrowserRouterで囲ったのですが、
今度は以下のエラーになります。

Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

main.tsx (async () => { log(`${name} v${version}`); document.title += ` v${version}`; render( <React.StrictMode> <Global styles={globalStyle} /> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById("contents") ); })().catch((err) => console.error(err));

React-Router関連のディレクトリ構造は以下になるのですが、
この場合、どこをRouterで囲えば良いのでしょうか??

srcーauthーHome                ーSigninなど      ーlpーheaderーindex                         ーmenu            ーmain            ーapp      ーrouterーrouterなど

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

エラーに関してはRoutes内で別のコンポーネントを使っていた箇所があり、そこを修正すると解決しました。
範囲に関しても、App.tsxをBrowerRouterで囲うことで解決しました。

未だ腑に落ちていませんが違う質問になると思うので、こちらはクローズします。

投稿2022/01/19 03:12

HALUO

総合スコア28

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問