

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

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

"react-router-dom": "5.2.0"

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

[code]

    Server Error
    Error: Invariant failed: Browser history needs a DOM
    
[/code]

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

[code]

    //_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>
      );
    }
    
[/code]

[code]

    //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;
    
[/code]

[code]

    {
      "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"
      }
    }
    
[/code]

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

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

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

[code]

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

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


CC BY-SA 4.0
2023-04-23T16:30:00.060
94628
2023-04-23T16:30:00.060
58043
question
javascript node.js reactjs react-router-dom
React Routerの設定について　Error: Invariant failed: Browser history needs a DOM