javascript - React 登录后路由器 Dom 不重定向我

我现在正在创建一个基本的登录页面,而且我是 react 的新手。到目前为止,由于我没有登录,该页面已成功将我重定向到“/登录”页面。登录后,我得到了一个“以访客身份登录”的 console.log,这是我现在想要的,但是,我不要被重定向到主页。有人可以帮我弄这个吗?

相关代码在返回调用之后,但我将其全部留在那里以供上下文

非常感谢!

import Intro from './components/Intro';
import SignIn from './components/SignIn';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Routes, Navigate, useParams, useNavigate } from 'react-router-dom';
import './App.css';
import { useState, useEffect } from 'react';


function App() {

  const guestUser = {
    username: "guest",
    password: "guest",
  }

  const [user, setUser] = useState({username: "", password: ""})
  const [error, setError] = useState("");

  
  

  const Login = details => {
      console.log(details);
      if(details.username == guestUser.username && details.password == guestUser.password) {
        console.log("Logged in as guest");
        setUser({
          username: details.username,
          
        });
        
        
      } else {
        console.log("details do not match");
        setError("Details do not match.")

      }
  }

  const Logout = () => {
      console.log("logout");
  }



  return (

    <div className="App">
      
      <Router>
        <Routes>
          
          <Route path="/Login" element={<Intro Login={Login} Logout={Logout} error={error}/>} />
          <Route path="/Home" element={<Home user={user}/>}/>
          <Route path="" 
            element={user.username !== "" ? <Navigate to ="/Home" /> :
            <Navigate to ="/Login"/>}/>
          
          
          
      
      
          
        </Routes>

      </Router>
        
    </div>
     
 
    
  );
}

export default App;

回答1

在您的登录功能中,成功登录后您不会导航到您的主页...

import Intro from './components/Intro';
import SignIn from './components/SignIn';
import Home from './components/Home';
import { BrowserRouter as Router, Route, Routes, Navigate, useParams, useNavigate } from 'react-router-dom';
import './App.css';
import { useState, useEffect } from 'react';

function App() {

  const guestUser = {
    username: "guest",
    password: "guest",
  }

  const [user, setUser] = useState({username: "", password: ""})
  const [error, setError] = useState("");

  const Login = details => {
      console.log(details);
      if(details.username == guestUser.username && details.password == guestUser.password) {
        console.log("Logged in as guest");
        setUser({
          username: details.username,
          
        });
 <Navigate to ="/Home"/>}/>
                
      } else {
        console.log("details do not match");
        setError("Details do not match.")

      }
  }
  const Logout = () => {
      console.log("logout");
  }
  return (
    <div className="App"> 
      <Router>
        <Routes>
          <Route path="/Login" element={<Intro Login={Login} Logout={Logout} error={error}/>} />
          <Route path="/Home" element={<Home user={user}/>}/>
          <Route path="" 
            element={user.username !== "" ? <Navigate to ="/Home" /> :
            <Navigate to ="/Login"/>}/>  
        </Routes>

      </Router>
        
    </div>
  );
}
export default App;

这将起作用

相似文章

reactjs - 如何让一个组件显示在另一个组件中?

现在我必须执行以下操作:显示酒店列表包括每个酒店的地址和图像然后显示酒店中有哪些房间按容量过滤这些房间到目前为止,我可以很好地显示酒店的名称、地址和图像,并且可以根据他们的1-5评级过滤这些,但我已经...

最新文章