React Router v6 的問題 - 顯示空白頁面

Question

我試圖弄清楚如何將 react-router 用於具有反應的應用程序。 但是我的路線部分不起作用，無論如何它都顯示一個空白頁面。

以下是所用文件的代碼部分：

索引.js

import ReactDOM from "react-dom"
import App from './components/App';
import 'bootstrap/dist/css/bootstrap.min.css'

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

應用程序.js

import { Container } from "react-bootstrap";
import Signup from "./Signup";
import HomePage from "./HomePage";
import { AuthProvider } from "../context/AuthContext"
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

function App() {
 return (
   <Container className="d-flex aling-items-center justify-content-center" style={{ minHeight: "100vh" }}>
   <div className="w-100" style={{ maxWidth: "400px", display: "flex", flexDirection: "column", justifyContent: "center"}}>
     <Router>
       <AuthProvider>
         <Routes>
           <Route path="/" element={<HomePage />}></Route>
           <Route path="/signup" element={<Signup />}></Route>
         </Routes>
       </AuthProvider>
     </Router>
  </div>
 </Container>
 )
}

export default App;

Home.js和Signup.js

import React from 'react'

export default function HomePage() {
  return (
    <div>This is the homepage</div>
  )
}

AuthContext.js和firebase.js

import React, { useContext, useState, useEffect } from 'react'
import { auth } from '../firebase'

const AuthContext = React.createContext()

export function useAuth() {
    return useContext(AuthContext)
}

export function AuthProvider({children}) {

    const [currentUser, setCurrentUser] = useState()
    const [loading, setLoading] = useState('true')

    function signup(email, password) {
        return auth.createUserWithEmailAndPassword(email, password)
    }

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(user => {
            setCurrentUser(user)
            setLoading('false')
        })
    
        return unsubscribe

    }, [])

    const value = {
        currentUser,
        signup
    }

  return (
      <AuthContext.Provider value={value}>
          {!loading && children}
      </AuthContext.Provider>
  )
}

//------------------(firebase.js)---------------------

import firebase from 'firebase/compat/app'
import "firebase/compat/auth"

const app = firebase.initializeApp({
    apiKey: "***************************************",
    authDomain: process.env.REACT_AUTH_DOMAIN,
    projectId: process.env.REACT_PROJECT_ID,
    storageBucket: process.env.REACT_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_ID
})

export const auth = app.auth()
export default app

我必須將鍵指定為字符串，因為將它寫為其他參數不起作用

我也嘗試過使用不同版本的 react-router，閱讀其他已回答的問題，或以不同的方式編寫代碼。 沒有任何效果

Answer 1

不要使用字符串"true"和"false"代替實際的 boolean 值。 非空字符串總是真實的。 將您的loading state 從字符串更改為布爾值。

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
       setCurrentUser(user);
       setLoading(false);
    });
    
    return unsubscribe;
  }, [])

  const value = {
    currentUser,
    signup
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}