0

実現したいこと
https://reffect.co.jp/react/react-firebase-auth#React_Router
このサイトの7 React Routerの設定の最初の部分を実装したいです。

前提
6のユーザー情報の共有の部分まではできていて実際に動いているのですが、
を書いた途端に以下のエラーが出て動いてくれません。
react-router-domは記事に倣ってv5を入れてます。

"react-router-dom": "5.2.0"

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

Server Error
Error: Invariant failed: Browser history needs a DOM

該当のソースコード

//_app.js
import '@/styles/globals.css'
import React  from 'react';
import SignUp from './components/SignUp';
import {AuthProvider} from './context/AuthContext';
import {BrowserRouter,Route} from 'react-router-dom';


export default function App({ Component, pageProps }) {
  return (
    <AuthProvider>
      <div style={{ margin: '2em' }}>
      <BrowserRouter>
        <Route exact path="/signup" component={SignUp} />
      </BrowserRouter>
      </div>
    </AuthProvider>
  );
}
//SignUp.js
import {auth} from '../../firebase';
import { useAuthContext } from '../context/AuthContext';

const SignUp = () => {
    const handleSubmit = (event) =>{
        event.preventDefault();
        const{email,password} = event.target.elements;
        auth.createUserWithEmailAndPassword(email.value,password.value);
    };

    return (
        
        <div>
            <h1>ユーザ登録</h1>
            <form onSubmit={handleSubmit}>
                <div>
                    <label>メールアドレス</label>
                    <input name='email' type='email' placeholder="email" />
                </div>
                <div>
                    <label>パスワード</label>
                    <input name='password' type="password" />
                </div>
                <div>
                    <button>登録</button>
                </div>
            </form>

        </div>

    )


  };
  
  export default SignUp;
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "autoprefixer": "10.4.14",
    "axios": "^1.3.5",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "firebase": "^9.20.0",
    "history": "4.10.1",
    "next": "13.3.0",
    "postcss": "8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-router-dom": "5.2.0",
    "tailwindcss": "3.3.1"
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.3.3"
  }
}

試したこと
ChatGPTにひたすら聞いてやってみたんですけど

BrowserRouter を HashRouter に変更する =>ページが表示されない
BrowserRouter を使用する場合、クライアントサイドでのみ使用するようにする => document is not defindって出てソレの解消もわからん
これらの方法を試して、問題を解決できるかどうか確認してみてください。

また、回答にあるように、BrowserRouter を使用する場合、以下のようにクライアントサイドでのみ使用する必要があります。

if (typeof window !== 'undefined') {
  const BrowserRouter = require('react-router-dom').BrowserRouter;
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    document.getElementById('root')
  );
}

補足情報(FW/ツールのバージョンなど)
yarn dev でローカルホスト起動させてます 関係あるかな?

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。