如何从 react 和 firebase 为每个用户创建用户页面答案

【问题标题】：How to create user page for each user from react and firebase如何从 react 和 firebase 为每个用户创建用户页面
【发布时间】：2023-04-05 06:01:01
【问题描述】：

我是 react 和 firebase 身份验证的新手。我想知道如何在我的网站上为每个登录的用户创建一个页面。例如，一个名为“Max”的用户在我的网页上注册，程序应该为他创建一个用户页面。因此，当另一个用户访问“Myapp.com/user/max”时，它应该会显示 Max 的页面。

你能给我一个概念和想法吗？

我的注册看起来像这样：-

import React from "react"
import { useHistory } from "react-router-dom"
import firebase from "firebase/app"
import "./firebase"
import fire from "./firebase"
function Signup(){
    const history = useHistory()
    function signUp(){
        let uEmail = document.getElementById("email").value;
        let uPassword = document.getElementById("password").value;
        let userName = document.getElementById("userName").value;
        async function send(email, password){
            await firebase.auth().createUserWithEmailAndPassword(email, password).then(()=>{
                console.log("successfull");
                let userID = firebase.auth().currentUser.uid;
                console.log(userID)
                firebase.database().ref("users/"+userID+"/praivate/login credentials").set({
                    "userName": userName,
                    "userId": userID,
                })
            })
            history.push("./login")
        }
        send(uEmail, uPassword);
    }
    return(
        <div id = "signUp">
               <input id = "email" placeholder = "email" />
               <input id = "password" placeholder = "password" />
               <input id = "userName" placeholder = "username" />
               <button onClick = {signUp}>Enter</button>
        </div>
    )
}
export default Signup

我的应用 js 看起来像这样：-

import check from "./component/checkAt"
import './App.css';
import Nav from "./component/nav"
import Header from "./component/header"
import About from "./component/about"
import Home from "./component/home"
import Login from "./component/login"
import { Route, BrowserRouter as Router, Switch, Redirect } from 'react-router-dom';
import fire from "./component/firebase";
import Signup from "./component/Signup"
//import auth from "firebase/auth";
let log;

function App() {
  return (
    <>
      
      <Router>
        
      </Router>
      <Router>
        
        <Switch> 
          <Route path="/" exact component = {Home} />
          <Route path="/about" exact component = {About} />
          <Route path="/login" exact component = {Login} />
          <Route path = "/Signup.js" exact component = {Signup} />
        </Switch>
      </Router>
      
    </>
  );
  
}

export default App;

【问题讨论】：

向应用程序添加一些路由/导航，并定义匹配“/user/:userId”的路由/路径，并呈现访问userId 参数并将正确数据加载到页。尝试一些事情并使用Minimal, Complete, and Reproducible 代码示例提供更新的问题。

标签： javascript reactjs firebase firebase-realtime-database firebase-authentication

【解决方案1】：

在您的 Switch 中定义一个使用动态路径的 Route。

<Route path="/user/:userId" component={UserPage} />

“UserPage”组件将接收route props（history、location 和match）。路径参数位于 match 的 props.match.params.userId 上。

const UserPage = ({ match }) => {
  const { params: { userId } } = match;
  // do with `userId` what you need to load that user's data

  ...
};

【讨论】：

【解决方案2】：

你需要创建一个带参数的路由。

<Route path="/user/:name" component={UserComponent} />

后端也是如此，创建一条公共路由。

【讨论】：