React 將 isLoggedIn useState 從 Login 組件傳遞給 app.js

Question

我的 App.js 中有一個名為 isloggedIn 的 useState

我想將isLoggedIn傳遞給 Login 組件，並在身份驗證后設置 isLoggedIn 的值。

我的登錄組件：

function Login(props) {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const history                 = useHistory();
    
    // Handle Login
    const handleLogin = async (e) =>{
        e.preventDefault();
        const adminData = {username, password};
        const response = await axios.post(
            "http://localhost:8000/api/auth/v1/login",
            adminData
        );
        if(response.data.error === "false"){
            //want to set the value of is logged in here
            history.push("/Admin/Dashboard");
        }else if(response.data.error === "true"){
            alert("Username or password is wrong")
        }
    };
    return(.......LOGIN FORM......)
 }

我的 App.js

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  return (
    <Router>
        <div className="App">
          {/* Navbar */}
          <Navbar/>
          

          {/* Pages */}
          <Switch>
            <Route path="/" exact                     component={Home}/>
            <Route path="/about"                      component={About}/>
            <Route path="/contact"                    component={Contact}/>

            {/* Admin Pages */}
            <Route path="/Admin/Login" exact          component={Login}/>
            <ProtectedRoute path="/Admin/Dashboard"   component={Dashboard} isLoggedIn={isLoggedIn}/>

            {/*404 Not Found Page*/}
            <Route path="*"                           component={Page404} />
          </Switch>
        </div>
    </Router>
    
  );
}

我的 protectedroute.js 需要 isLoggedIn 來呈現一些受保護的路由

額外的問題我有很多用於管理儀表板的菜單。 App.js 中菜單 go 的所有路由是否與其他路由一樣？ 或者他們是否會被 ny Admin Dashboard 處理？ 我將在儀表板上使用 material-ui 抽屜

Answer 1

您可以將渲染道具傳遞給路線。 這將允許將道具傳遞給您要渲染的組件。

<Route
  path='/login'
  render={(props) => (
    <Login {...props} isLoggedIn={isLoggedIn} />
  )}

我假設您使用的是 React 路由器 v4，因為您在問題中沒有提到。 更多信息可以參考博客https://ui.dev/react-router-v4-pass-props-to-components 。 確保傳播道具，因為所有其他道具也需要傳遞給登錄組件（例如：歷史）