常連

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など

```

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

### 実現したいこと

URLパラメーターを使ったfirebaseからのデータの取得

(自分なりに土曜日を費やしたのですが解決しませんでした。協力お願いします)

### 前提

現在練習としてTwitterクローンを作っていて、
React, ChakraUI, Javascript, react-router v6と、データベースにfirebaseを使っています

その過程の、プロフィール画面を作る段階で詰まってしまいました

下記のようなRouterの設定で、常にレフトバーとライトバーは表示させつつ
真ん中の部分をタイムライン画面やプロフィール画面にする設計にしています。
そして、プロフィール画面に飛んだ時に、そのURLパラメーターによってどのユーザーのプロフィールを表示させるのか識別させています
```javascript
function AppRoutes() {
  return (
    <>
      <Flex justify="center">
        <LeftSidebar />
        <Routes>
          <Route path="/" element={<Timeline />} />
          <Route path="/profile/:userId/*" element={<Profile />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
        <RightSidebar />
      </Flex>
    </>
  );
}
export default AppRoutes;
```
そしてApp.jsで、ちゃんと挟んでいます
```javascript
    <BrowserRouter>
      <UserProvider>
        <ChakraProvider theme={CustomTheme}>
          <AppRoutes />
        </ChakraProvider>
      </UserProvider>
    </BrowserRouter>
```

そして、実際の取得について

まずfirebaseの構造としては
postsコレクションにそれぞれの投稿をドキュメントをして格納しています
usersコレクションの中にそれぞれのユーザーをドキュメントとして格納し
(そしてそれぞれのユーザードキュメントに一意のuserIdフィールドを設けています)

ーーーーーーーーーーーーーーーーーーーー

そして動作の流れとしては
①URLパラメーターの値を取得し、userIdフィールドにそのURLパラメーターの値を持っているアカウントのドキュメントを、usersコレクションから探す

②そのアカウントの情報が入ったオブジェクトを取得し、useStateでsetし、それを画面の「アイコン」とか「アカウント名」とか…の情報として表示させる

＝＝

③次に「手順②」URLパラメーターの値を持っている投稿のドキュメントをpostsから探して取得する(つまり、URLパラメーターのuserIdのアカウントが投稿した投稿)

④それをデータとして解析して、useStateでposts配列にsetする

⑤map関数で出力する

**<動作の目的>
・①②がプロフィールでアカウントの基本情報を表示
・③④⑤が、そのアカウントからされた投稿だけを取得して表示**

ーーーーーーーーーーーーーーーーーーーー

### 発生している問題・エラーメッセージ
という流れになっていて
①、②の取得と表示は全く問題ありません。
ですが、③④に問題があるのです

現在react-routerのnavigateを使ってプロフィールに遷移するようにしていて、その手順で遷移した時はしっかりと「手順④」でposts配列にデータが格納されて投稿が出力されるのですが、その状態で再リロード(再読み込み)すると投稿が表示されなくなってしまうのです

コンソールを見ると、posts配列が空でした。つまりでデータが取得できていないのです

navigateから遷移するとちゃんと取得して表示されるのに…
再リロード(再読み込み)やURL直打ちすると取得できずにposts配列が空で、投稿が表示されません


### 該当のソースコード(Profile.jsxの全文)

```javascript
import {
  Avatar,
  Box,
  Button,
  Flex,
  HStack,
  Icon,
  Image,
  Text,
  VStack,
} from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
  collection,
  query,
  where,
  getDocs,
  orderBy,
  onSnapshot,
} from 'firebase/firestore';
import { db } from '../../../firebase';
import HeaderCenter from '../Molecules/HeaderCenter';
import { AiOutlineArrowLeft, AiOutlineLink } from 'react-icons/ai';
import Post from '../Organisms/Post';

function Profile() {
  const navigate = useNavigate();
  const [userData, setUserData] = useState();
  const [isLoading, setIsLoading] = useState(false);
  const [posts, setPosts] = useState([]);
  const { userId } = useParams();

  const getUserByUserId = async _userId => {
    const q = query(collection(db, 'users'), where('userId', '==', _userId));
    const querySnapshot = await getDocs(q);
    const userDocs = querySnapshot.docs[0].data();
    return userDocs;
  };

  useEffect(() => {
    setIsLoading(true);
    getUserByUserId(userId)
      .then(userDocs => {
        setUserData(userDocs);
      })
      .then(() => {
        setIsLoading(false);
      });

    const postsRef = collection(db, 'posts');
    console.log(userId);
    const postsQ = query(
      postsRef,
      where('userId', '==', userId),
      orderBy('time', 'desc')
    );
    console.log(postsQ);
    const unsubscribe = onSnapshot(postsQ, querySnapshot => {
      setPosts(
        querySnapshot.docs.map(doc => ({ docId: doc.id, ...doc.data() }))
      );
    });

    return () => {
      unsubscribe();
    };
  }, [userId]);

  return (
    <>
      <Box
        w={{ base: '100%', sm: '42rem' }}
        spacing="0"
        h="100vh"
        borderRight="1.5px solid #e4e4e4"
        borderLeft="1.5px solid #e4e4e4"
        position="relative"
        overflowY="scroll"
        sx={{
          '&::-webkit-scrollbar': {
            display: 'none',
          },
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
        }}
      >
        <HeaderCenter>
          <HStack>
            <Button
              variant="secondary"
              size="9"
              sx={{
                w: '10',
                h: '10',
                ml: '2',
              }}
              onClick={() => {
                navigate('/');
              }}
            >
              <Icon as={AiOutlineArrowLeft} boxSize="6" />
            </Button>
            <Text variant="title">
              {!isLoading ? userData?.displayName : '..........'}
            </Text>
          </HStack>
        </HeaderCenter>
        <Image
          src={userData?.headerImage}
          fallbackSrc={'https://colorate.azurewebsites.net/SwatchColor/D3D3D3'}
          sx={{
            w: '100%',
            h: '40',
            bg: 'subGray.400',
            objectFit: 'cover',
            objectPosition: 'center',
          }}
        />
        <Avatar
          src={userData?.photoURL}
          sx={{
            boxSize: '40',
            position: 'absolute',
            top: '32',
            left: '6',
            border: '5px solid white',
            imageRendering: 'optimizeQuality',
          }}
        />
        <VStack
          align="start"
          mt="6.2rem"
          pl="4"
          pb="3"
          spacing="1"
          borderBottom="1.5px solid #e4e4e4"
        >
          <Text variant="title" fontSize="2xl">
            {userData?.displayName}
          </Text>
          <Text variant="subTitle" fontSize="lg">
            @{userData?.userId}
          </Text>
          {userData?.webSite ? (
            <Flex align="center" color="blue.500" fontSize="md" pt="3">
              <Icon as={AiOutlineLink} />
              <a href={userData.webSite}>{userData.webSite}</a>
            </Flex>
          ) : (
            <Flex
              align="center"
              fontSize="md"
              pt="3"
              color="blue.500"
              cursor="default"
            >
              <Icon as={AiOutlineLink} />
              <Text variant="subTitle" color="blue.500">
                Webサイトは設定されていません
              </Text>
            </Flex>
          )}
          <HStack spacing="6" pt="5">
            <Text variant="subTitle">{userData?.following || 0}フォロー中</Text>
            <Text variant="subTitle">{userData?.folower || 0}フォロワー</Text>
          </HStack>
        </VStack>
        {posts?.map(postData => (
          <Post postData={postData} />
        ))}
      </Box>
    </>
  );
}

export default Profile;
```

### 試したこと

PCの再起動
サーバーの再起動
chatGPTに聞いてみる
コードを自分なりに弄ってみる
react-routerのバージョン確認

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

npmを使っています


reactでURLパラメーターを使うfirebaseのデータ取得で、再リロードやURL直打ちすると取得できない

プログラムではなくネットワークの話になるのですがもしご存知の方がいらっしゃれば教えて頂ければと思います。

#環境
当方環境ではモデムとWiFiルーターに異なるセグメントが割当られています。

具体的には下記のような設定です。

* モデム（PR-400NE）：192.168.1.1
* WiFiルーター（NTCM1）：192.168.10.1
* PC：192.168.1.250
* Android端末：192.168.10.101～192.168.10.200

上記のような設定になっており、PCはモデムに有線で繋ぎ、Android端末をWiFiルーターに繋いでいます。

WiFiルーターのWAN側にモデムのLANを接続しています。

当方のやりたいこととしては「PCからWiFiルーターの設定画面を表示する・PCからAndroid端末にて動作しているWebサーバーに接続する」の2点になります。

現在、Android端末からWiFiルーターの設定画面を開くことは出来ますが、PCから開くことは出来ません。

WiFiルーターの設定画面からpingテストが行えたのでモデムとPCにそれぞれpingを送りましたが、こちらは正常に返って来ました。

モデム・PCからWiFiルーターにpingを送りましたが、こちらは全て通りませんでした。

#試したこと1
モデムの「静的ルーティング設定」というものがありましたので、下記のような設定を追加しました。

* 指定方法：宛先IPアドレス指定
* 宛先IPアドレス：192.168.10.0
* ネットマスク：255.255.255.0
* インタフェース：LAN側
* ゲートウェイ：192.168.1.1

この状態でpingを送りましたが返って来ませんでした。

念の為tracertを行ってみたのですが、「192.168.1.1」の次の要求でタイムアウトを起こしていました。

ゲートウェイの設定が悪いのかと思い下記の様に設定してみました。

* 指定方法：宛先IPアドレス指定
* 宛先IPアドレス：192.168.10.0
* ネットマスク：255.255.255.0
* インタフェース：LAN側
* ゲートウェイ：192.168.10.1

この状態でもpingは通りませんでした。

tracertすると「192.168.1.1」の次の要求で外部ネットワークに出ていました。

#試したこと2
WiFiルーターの設定に「IPv4LAN 側設定」があったため、同セグメントに設定しました。

具体的には以下のようにしました。

IPアドレス／ネットマスク
* IPアドレス：192.168.1.50
* ネットマスク：24
DHCPサーバ
* DHCPサーバ機能：ON
* リースタイム：24
* DHCP割当アドレス：192.168.1.51 - 192.168.1.150

設定後ルーターを再起動するとセグメントが「0」になっていました。

設定画面を開くとWAN側との競合が発生したと書かれていました。

#やりたいこと
既に書いておりますが、モデム・PC側からWiFiルーター・Android端末への接続を行いたいです。

どこの設定を変えればよいか、具体的にご教授頂けると幸いです。

#追記
WiFiルーターのユーザーズマニュアルを追記します。
http://www.aterm.jp/function/ntcm1/index.html

「ポートマッピング機能」を使用し、指定ポートを特定ポートへ変換することでWAN側アドレスからAndroid端末のサーバーに接続出来ましたが、Javascriptの読み込み等でエラーになり正常な表示は出来ませんでした。

またWAN側アドレスに対してpingを送信してみましたが、こちらは通りませんでした。

別セグメントに設定されているルーターにpingを通したい

## 初期ネットワーク構成

現在以下の構成になっていたRTXだけにFortiGateを導入しました。
![![イメージ説明](933cb5425079e7a1c19a4e1ec40299e1.jpeg)]

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
にてインターネットをしておりました。

### 前提・実現したいこと①　NATモードにて構成

この状態のネットワークに、Fortigate60Dを導入いたしました。
NATモードか、トランスペアレントモードのどちらで導入するか、どうするか悩んだ末にまずはNATモードにて構成をいたしました。

![イメージ説明](b35ab7cd83c0f535381967c503471820.jpeg)

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
FortiGate 60D Internal IPアドレス 192.168.1.251 /24

ところが、FortiGate側のDHCPリレーにし、RTX側にてDHCPサーバにしたのですが、
ネット接続ができません。
試しにスタティックルートを書いてみましたが通信ができませんでした。
このような構成ではデフォルトゲートウェイを必ずFortiGateに向ける必要があるのでしょうか？
PCからFortiGateまでの192.168.1.251にはPingが飛びます。

### 以下構成でネット接続はできる事は確認。

FortiGateへDHCPサーバーを設けて、RTXをDHCPリレーにしたところ、問題なくネット接続を
できる事を確認しました。

![イメージ説明](4897466d776ab7188f820dd17eb625b4.jpeg)

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
FortiGate 60D Internal IPアドレス 192.168.1.251 /24

### 前提・実現したいこと②　トランスペアレントモードにて構成

トランスペアレントモードにて現状の構成を崩さず以下を構成も考えておりますが、
トランスペアレントモードはL2レベルでのトラフィック制御ということになると思いますが、
RTX 配下へ設置する事になると思い、考えられるのは既存のネットワーク構成を変更することなく、挟むだけで導入可能にし
DMZのセグメントを分けたくない場合も有効になるメリット面はありますが、デメリットや出来なくなることはないのでしょうか？

![イメージ説明](81808b3c4880cbb674d476649dbab418.jpeg)

RTX1210 LAN1 IPアドレス 192.168.1.250 /24
FortiGate 60D Internal IPアドレス 192.168.1.251 /24

###疑問点まとめ

1.RTXとFortigate（NATモード）を併用で使用する場合は、デフォルトゲートウェイを必ずFortiGateに向ける必要があるのでしょうか？
　RTXにDHCPサーバをさせる事をさせる事はできないものなのでしょうか？

2.トランスペアレントモードにすると、NATモードに比べるとできなくなることやデメリット面はあるのでしょうか？

3.RTXのL2TP/IPsecVPNではなく、FortiVPN Clientを優先的に使用したいと思うと、NATモードでないと機能しないでしょうか？

当方、初歩的な事も書かれていると思いますが、特にVLANを切っている構成ではございません。
前提・実現したいこと①　NATモードにて構成
前提・実現したいこと②　トランスペアレントモードにて構成　にて同様にも扱えるようにご教授頂けますと幸いです。

よろしくお願いいたします。

FortiGateとRTX環境のネットワーク配置について

### 前提
React-Routerでページ遷移を実装している

### 実現したいこと
戻るボタンで前のページに戻った時に検知してイベント発火→ページを再読み込みしたい

### 発生している問題・エラーメッセージ
addEventListenerを使った方法は見つけたがレンダリングが多くなってしまう
せっかくReactを使用しているのでReact-Routerを使用した方法はないのか

### 該当のソースコード

```
  window.addEventListener('popstate',e=>{
 　　console.log('レンダリング')
       window.location.reload();
    })
});
```

### 試したこと
addEventListenerを使用した方法しか記事がなかった




React ブラウザの戻るボタンを検知したい

### 前提
ボタンをクリックした時にonClickで関数を呼び出しreact-router-domを使ってページ遷移させたいです。

### 発生している問題・エラーメッセージ
クリックしてもなにも起こりません。
コンソールにもエラーはありません。

### 該当のソースコード

App5.jsx
```
import { Link } from "react-router-dom";

function App5() {

// ここの関数でページ遷移を実行したい
const aaa=()=>{
<Link to={`/register/`}>こちら</Link>
}

    return(
        <>
        <h1>ホーム</h1>
<button onClick={aaa}>クリック</button>
        </>    
    )
}
```
register.jsx
```
import { Link } from "react-router-dom";

const Register = () => {
  return (
    <>
      <h1>新規登録ページ</h1>
      <div>
        <Link to={`/`}>ホームに戻る</Link>
      </div>
    </>
  );
};

export default Register;
```
main.jsx
```
import React from 'react'
import ReactDOM from 'react-dom'

import App5 from './router/App5'
import Register from './router/register'
import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(

    <BrowserRouter>
    <Routes>
      <Route path={`/`} element={<App5 />} />
      <Route path={`/register/`} element={<Register />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
)
```

### 試したこと

関数の中で戻るボタンの実装方法はありましたが特定のページへ遷移させる方法が見つかりませんでした。

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

react ver.18


Reactでボタンをクリックしたときにページ遷移させたい

こんにちは。
プログラミング初心者です。

現在、Railsでフリマサイトを作成しておりまして、
出品した商品の編集ができません。

#エラー内容
No route matches [PATCH] "/users/products"

#products_controller.rb
```ruby
def edit
    #ユーザーの商品詳細編集
    @product = Product.find(params[:id])
  end 
  
  def update
    upload_file = params[:product][:image1]
    #投稿画像がない場合
    if upload_file.present?
       #画像のファイル名取得
      upload_file_name1 = upload_file.original_filename
      output_dir = Rails.root.join('public', 'images')
      output_path = output_dir + upload_file_name1
      File.open(output_path, 'w+b') do |f|
        f.write(upload_file.read)
      end
      @product.image1 = upload_file_name1
    end
    if @product.save
      flash[:success] = '商品情報を更新しました'
      redirect_to top_path and return
    else
      flash[:danger] = '更新に失敗しました'
      redirect_to edit_product_path and return
    end
  end
```


#routes.rb

```Ruby
Rails.application.routes.draw do
  
  root 'products#index', as: :root
  
  post '/', to: 'products#index'
  
  post '/', to: 'products#create'

  get 'users/profiles', to: 'users#top', as: :top
  
  get 'users/sign_up', to: 'users#new', as: :sign_up
  
  post 'users/sign_up', to: 'users#create'
  
  get 'users/sign_in', to: 'users#sign_in', as: :sign_in
  
  post 'users/sign_in', to: 'users#sign_in_process'
  
  get 'users/sign_out', to: 'users#sign_out', as: :sign_out
  
  get 'users/products', to: 'users#products', as: :user_products
  
  post 'users/products', to: 'products#create'
  
  get '/users/products/new', to: 'products#new', as: :new_product
  
  get '/users/products/:id', to: 'users#product', as: :user_product
  
  delete '/users/products/:id/', to: 'products#destroy'
  
  get '/users/products/:id/edit', to: 'products#edit', as: :edit_product
  
  patch '/users/products/:id/edit', to: 'products#update'
  
  get '/users/likes', to: 'users#likes', as: :user_likes
  
  get '/users/profiles/edit', to: 'users#edit', as: :edit_user
  
  post '/users/profiles/edit', to: 'users#update'
  
  get '/markets/:id', to: 'products#show', as: :product
  
  get '/markets/:id/payment', to: 'products#payment', as: :payment
  
  get '/markets/:id/payment_complete', to: 'products#payment_complete', as: :payment_complete
  
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
```
似たような質問やサイトを参考にしましたが、解決できません。
説明不足で申し訳ございませんが、何卒よろしくお願い致します。

No route matches [PATCH] が解決できない

この画像にあるように、ルーターの「Fa0/0」と「S0/0」の違いが分かりません。それぞれどんな役割なのでしょうか？また、「S0/0」のところを「Fa0/0」で繋いではいけないのでしょうか？

よろしくお願い致します。

![イメージ説明](a35cc8816a18a081e9f3f79d979aae62.jpeg)

![イメージ説明](0c56d5613177c0b787a4b2ddfc174ffd.png)