

現在Reactを勉強中の者ですが最近Reactでログインページを作成して例えば登録ボタンを押すと別のコンポーネント  
ページに遷移できることを実行したいのに書き方が分からずエラーでつまずいてしまいます。

例えば Signin.jsに以下を定義してもページ遷移できずいろいろ調べても解決できずこまっています。

[code]

    import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
    
    <Router>
          <div className="Signin">
            <Header />
    
            <Routes>
           <Route path="/Home" element={<HomePage />} />
              
            </Routes>
            {/* <HomePage />
          </div>
        </Router>
    
[/code]

どのように書けばSignin.jsからHomePage.jsに遷移可能でしょうか?  
プログラミング勉強中で説明が分かりづらいところもあると思い申し訳ないですが何卒ご教授よろしくお願い致します。

＊説明だけだと分かりづらいので下記にApp.js/Signin.js/HomePage.jsを載せてみました。

[code]

        function App() {
          return (
    
    
            <Router >
              <div className = "App" >
                <Header / >
      
                <Routes>
                  <Route path = "/" element = { < Signin / >} />
                  <Route path = "/Home" element={ < HomePage / >}/>
                  <Route path = "/Products" element = { < Products / >} />
                  <Route path = "/Sns" element={ < Sns / >}/> 
                  <Route path = '/Signin' element = { < Signin / > } />
                </Routes>
                {/* <HomePage />
                      <Products /> 
                      <Sns /> */
                }
              </div>
            </Router>
          );
        }
    
    
        export default App;
    
[/code]

[code]

        // import image1 from "../../Images/bg1.jpg";
        import mealImage from "../../Images/meal.jpg";
        import lightImage from "../../Images/light.jpg";
        import newrecipeImage from "../../Images/newrecipe.jpg";
        import dishImage from "../../Images/dish.jpg";
        import pastaImage from "../../Images/pasta.jpg";
        import pizzaImage from "../../Images/pizza.jpg";
        import chaudaImage from "../../Images/chauda.jpg";
    
    
    
    
    
        const HomePage = () => {
          return (
            <div className="container text-center">
                <h1>lunch share</h1>
    
                <img src={dishImage} className="dishImage" />
    
                <p>
                  xxxxです。料理が趣味で自宅でいろいろな世界の料理レシピに挑戦しています! 料理を通していろいろな人とレシピをシェアしたり様々なお話ができればいいなと思い
                  当サイトを立ち上げました! ブログの方も毎日更新しているので是非遊びに来て下さい。✨
                </p>
    
                <section class="page-section" id="services">
                  <div className="service">
                    <div class="text-center">
                      <h2 class="section-heading text-uppercase">レシピ一覧</h2>
                      <h3 class="section-subheading text-muted mb-5">
                        私が作ったレシピです。
                      </h3>
                    </div>
                    <div class="row text-center">
                      <div class="col-md-4">
                        <span class="fa-stack fa-4x">
    
                          <img src={pizzaImage} className="pizzaImage" />
                        </span>
                        <h4 class="my-3">ピザマルゲリータ</h4>
                        <p class="text-muted">
                          材料: 薄力粉, トマト, モッツァレラチーズ,etc<br></br>
                          作り方1: ピザ生地作り<br></br>
                          作り方2:  オーブンを２００°余熱する。
                        </p>
                      </div>
                      <div class="col-md-4">
                        <span class="fa-stack fa-4x">
                          <img src={pastaImage} className="pastaImage" />
                        </span>
                        <h4 class="my-3">ムール貝のパスタ</h4>
                        <p class="text-muted">
                          材料: ムール貝, パセリ, オリーブオイル,etc<br></br>
                          作り方1: パスタを茹でる<br></br>
                          作り方2: フライパンで具材を炒める。
                        </p>
                      </div>
                      <div class="col-md-4">
                        <span class="fa-stack fa-4x">
                          <img src={chaudaImage} className="chaudaImage" />
                        </span>
                        <h4 class="my-3">窯焼きチャウダー</h4>
                        <p class="text-muted">
                          材料: チーズ, じゃがいも,あさり,etc<br></br>
                          作り方1: 生地作り<br></br>
                          作り方2: あさりの砂を抜きじゃがいもを角切りにする。
                        </p>
                      </div>
                    </div>
                  </div>
                </section>
    
                <section id="skill">
                  <div class="text-center">
                    <h1 class="title">最近の出来事</h1>
                    <div class="row text-center">
                      <div class="col-md-4 services">
                        <div class="col-md-4 services">
                          <img src={mealImage} />
                          <h4>アウトドア</h4>
                          <p>野外レシピ始めました。</p>
                        </div>
    
                      </div>
                      <div class="col-md-4 services">
                        <img src={lightImage} />
                        <h4>照明換えました✨</h4>
                        <p>照明をおしゃれにしました✨</p>
                      </div>
                      <div class="col-md-4 services">
                        <img src={newrecipeImage} />
                        <h4>カプレーゼ作りました</h4>
                        <p>新レシピになります。</p>
                      </div>
                    </div>
                    <button type="button" class="btn btn-primary">
                      レシピ一覧
                    </button>
                  </div>
                </section>
              </div>
    
    
          );
        };
    
        export default HomePage;
    
[/code]

[code]

        import React from 'react';
        import './Signin.css';
        import { useEffect, useState } from "react";
        import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
    
    
    
        function Signin  ()  {
          const initialValues = { username: "", mailAddress: "", password: "" };
          const [formValues, setFormValues] = useState(initialValues);
          const [formErros, setFormErrors] = useState({});
          const [isSubmit, setIsSubmit] = useState(false);
    
          const handleChange = (e) => {
            // console.log(e.target.name);
            const { name, value } = e.target;
            setFormValues({ ...formValues, [name]: value });
            // console.log(formValues);
          };
    
          
    
          
    
          const handleSubmit = (e) => {
            e.preventDefault();
            setFormErrors(validate(formValues));
            setIsSubmit(true);
          };
    
          useEffect(() => {
            console.log(formErros);
            //エラーなしでかつ送信されているなら。
            if (Object.keys(formErros).length === 0 && isSubmit) {
              console.log(formValues);
            } else {
            }
          }, [formErros]);
    
          //バリデーションチェック
          const validate = (values) => {
            const errors = {};
            //半角英数字のみ(空文字OK)
            const regex =
              /^[a-zA-Z0-9_.+-]+@([a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]*\.)+[a-zA-Z]{2,}$/;
            //valueが空ならerrrosの配列に入れる。
            if (!values.username) {
              errors.username = "ユーザー名を入力してください。";
            }
            if (!values.mailAddress) {
              errors.mailAddress = "メールアドレスを入力してください。";
            } else if (!regex.test(values.mailAddress)) {
              errors.mailAddress = "正しいメールアドレスを入力してください";
            }
            if (!values.password) {
              errors.password = "パスワードを入力してください。";
            } else if (values.password.length < 4) {
              errors.password = "4文字以上15文字以下のパスワードを入力してください";
            } else if (values.password.length > 15) {
              errors.password = "4文字以上15文字以下のパスワードを入力してください";
            }
            return errors;
          };
    
          return (
            <div className="formContainer">
              <form onSubmit={handleSubmit}>
                <h1>ログインフォーム</h1>
                <hr />
                <div className="uiForm">
                  <div className="formField">
                    <label>ユーザー名</label>
                    <input
                      type="text"
                      name="username"
                      placeholder="ユーザー名"
                      value={formValues.username}
                      onChange={(e) => handleChange(e)}
                    />
                  </div>
                  <p className="errorMsg">{formErros.username}</p>
                  <div className="formField">
                    <label>メールアドレス</label>
                    <input
                      type="text"
                      name="mailAddress"
                      placeholder="メールアドレス"
                      value={formValues.mailAddress}
                      onChange={(e) => handleChange(e)}
                    />
                  </div>
                  <p className="errorMsg">{formErros.mailAddress}</p>
    
                  <div className="formField">
                    <label>パスワード</label>
                    <input
                      type="text"
                      name="password"
                      placeholder="パスワード"
                      value={formValues.password}
                      onChange={(e) => handleChange(e)}
                    />
                  </div>
                  <p className="errorMsg">{formErros.password}</p>
                  <button className="submitButton">登録
            
                  </button>
                  {Object.keys(formErros).length === 0 && isSubmit && (
                    <div className="msgOk">ログインに成功しました</div>
                  )}
                </div>
              </form>
            </div>
          );
        }
        export default Signin;
    
[/code]


CC BY-SA 4.0
2023-11-11T13:10:06.020
96758
2023-11-17T07:58:45.773
2023-11-17T06:56:55.247
19716
54247
question
reactjs react-router-dom
React　Routerを使ってログインボタンを押したら別のコンポーネント ページに遷移する書き方について教えて頂きませんか?


Reactの話とは別の話になりますが、SignInコンポーネント内でログインフォームの送信ボタン押下時にどこにも送信していないので、ログイン処理は動かないこととなります。  
ログイン処理を実現するためにはなんらかのバックエンドが必要です。(Reactはクライアント側のアプリケーションですが、別にサーバー側のアプリケーション≒バックエンド
が必要です。)

ログイン処理そのものはテストコードの為省略してある、単純にSignInコンポーネント内からHomeに移動したい  
ということであるならば`<Link
to="/HomePage">ホームページに移動</Link>`のようなコードを書くことでRouter内の遷移が可能です。


CC BY-SA 4.0
2023-11-17T07:07:32.113
96809
2023-11-17T07:07:32.113
19716
96758
answer


回答ありがとうございます。  
先程設定(import)をすることでそれぞれのコンポーネントに遷移することができました!


CC BY-SA 4.0
2023-11-17T07:58:45.773
96810
2023-11-17T07:58:45.773
54247
96758
answer