常連

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

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

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

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

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

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




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

### 実現したいこと

ポートベースVLAN間での相互通信を行いたいです。
ポートベースVLAN間を設定しているルータでは通信を行えているのですが、その下にあたる他セグメントの端末同士での疎通が取れない状態となっています。

    現)   lan1.1  vlan1  192.168.1.1   pc1  192.168.1.2(固定IP)
          lan1.2  vlan2  192.168.2.1   pc2  192.168.2.2(固定IP)
          
          pc1      lan1.1 疎通 ok   lan1.2 疎通OK pc2 疎通NG
          pc2      lan1.1 疎通 ok   lan1.2 疎通OK pc1 疎通NG　　 
          Router   lan1.1 疎通 ok   lan1.2 疎通OK pc1 疎通OK   pc2疎通OK 
       ※PC1とPC2の疎通を行いたいです。

### 該当の設定
以下、現在の設定情報

lan type lan1 port-based-option=divide-network
vlan port mapping lan1.1 vlan1
vlan port mapping lan1.2 vlan2
vlan port mapping lan1.3 vlan3

ip route default gateway pp 1
ip vlan1 address 192.168.1.1/24
ip vlan2 address 192.168.2.1/24
ip vlan3 address 192.168.3.1/24

pp select 1　- 省略
tunnel select 1 -省略

追加設定
ip filter 10 pass * * * * * 
ip vlan2 secure filter in 10 
ip vlan2 secure filter out 10

### 試したこと
 現状、元々設定されていた filter を全て外し、どのような通信が流れているかの確認を行いました。
 同セグメント帯通信はしっかり行えるのですが、他セグメントVLANへのフィルタリング接続設定が正常に行われていない様に感じます。
どのような設定が抜けているかご教授ください。


### 補足情報（FW/ツールのバージョンなど）
YAMAHA RTX820 (本来の設定を行いたい端末)
YAMAHA RTX1200(テスト環境復元用)

PC1  GW 192.168.1.1 DNS 192.168.1.1 MASK 255.255.255.0
PC2  GW 192.168.2.1 DNS 192.168.2.1 MASK 255.255.255.0 

ここにより詳細な情報を記載してください。


YAMAHA ポートベースVLAN間での相互通信について

プログラムではなくネットワークの話になるのですがもしご存知の方がいらっしゃれば教えて頂ければと思います。

#環境
当方環境ではモデムと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を通したい

### VueRouterでコンポーネントの切り替え


- [ ] 親コンポーネントの中の一部を複数ある子コンポーネントで切り替えたい

### 前提と質問

初心者ですので見当違いなことを言っていたらすみません。
Vue + VuetifyでSPAの社員管理を行うWebアプリケーションを作るという学習をしています。
画面として一番最初のHome画面以外すべての画面にHomeに戻る同じボタンを配置することになりました。
そこでHome画面から遷移した後にボタンを表示するだけの親コンポーネントで画面にボタンを表示して、その中でそれぞれの画面は子コンポーネントとして画面を切り替えたいと思いました。

調べた結果Vue Routerを使えばできそうだったのですができなかったのでここで質問させていただきます。
<RouterView />に指定のコンポーネントを表示させることは可能でしょうか？
今のままですと画面にはHomeボタン以外なく、子コンポーネントが表示されない状態です。
「/」のパスはHome画面で使用しているのでそれ以外のパスのコンポーネントを<RouterView />のところに表示させたいです。

### 該当のソースコード
質問用に簡単なものに差し替えてあります。
Home画面から遷移した後に表示する画面用のコンポーネントです。

```HTML(Vue)
<template>
    <div>
        <v-row justify="center">
            <div>
                
                <RouterView />
            </div>
        </v-row>
        <v-row>
　　　　
            <v-btn size="x-large" color=accent class="ma-16, button" @click="$router.push({ name: 'home' ,query:{id}}, )">
                <v-icon icon="mdi-home" />
                     HOME
            </v-btn>
        </v-row>
    </div>
</template>
```

```index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Select from '../views/return/SelectReturnBook.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/parent',
      name: 'parent',
      component: () => import('../views/Parent.vue'),
      children: [
        {
          path: '',
          component: () => import('../views/Child1.vue')
        },
        {
          path: 'child2',
          component: () => import('../views/Child2.vue')
        }
      ]
    },
    {
      path: '/child1,
      name: 'child1',
      component: () => import('../views/Child1.vue'),
    },
  
    {
      path: '/child2',
      name: 'child2',
      component: () => import('../views/Child2.vue')
    }
  ]
})

export default router

```



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

Vue3です

Vue3でVueRouterを使用して子コンポーネントを切り替える方法

## 初期ネットワーク構成

現在以下の構成になっていた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環境のネットワーク配置について

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

ルーターのインターフェースについて

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の適切な位置と影響範囲が分かりません。

### 前提
ボタンをクリックした時に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
