React Router登录登出系统问题：登录后导航栏Logout按钮不生效

核心问题分析 #

• 状态传递与判断错误：入口组件中loginStatus被包装为对象类型（{loginStatus: false}），但Layout组件直接用整个对象做布尔判断，导致逻辑异常；同时Layout接收的登出方法属性名是logout，但组件内调用的是props.handlelogout，属性名不匹配。
• 表单提交默认行为未阻止：Login和Logout的表单提交时，浏览器会默认刷新页面，导致React状态丢失，登出/登录逻辑无法正常执行。
• Logout按钮的href干扰：Nav.Link的href='/'会触发页面跳转，优先于表单的onSubmit执行，导致登出逻辑还没运行就跳转了。

修复方案与修正代码 #

1. 统一状态类型与属性名 #

将入口组件的loginStatus改为布尔值（无需包装成对象），同时修正Layout组件的属性接收名：

入口组件（index.js）修正后：

export default function Index(){
  const [loginStatus, setLoginStatus] = useState(false); 
  function handleLogout(){
    setLoginStatus(false);
    console.log("logouted");
  }
  
  return(
    <BrowserRouter>
      <Layout loginStatus={loginStatus} handleLogout={handleLogout} />
      <Routes>
        <Route index element={<App />}/>
        <Route path="login" element={<Login onLogin={() => {setLoginStatus(true); console.log("login");}} />}/>
      </Routes>
    </BrowserRouter>
  )
} 

2. 修正Layout组件的逻辑与表单行为 #

• 正确读取布尔类型的loginStatus
• 使用正确的登出方法属性名handleLogout
• 阻止Logout表单的默认跳转行为，移除Nav.Link的href避免干扰

Navbar布局组件（Layout）修正后：

function Layout(props) {
  const loginStatus = props.loginStatus;

  const handleLogoutSubmit = (e) => {
    e.preventDefault(); // 阻止默认刷新
    props.handleLogout();
  };

  return (
    <Navbar style={{backgroundColor:"rgb(146, 212, 246)"}} variant='dark' expand="lg">
      <Container className="container" fluid >
        <Navbar.Brand href="/"><strong>STH News</strong></Navbar.Brand>
        <Navbar.Toggle aria-controls="navbarScroll" />
        <Navbar.Collapse id="navbarScroll">
          <Nav
            className="me-auto my-2 my-lg-0"
            style={{ 'fontSize': '20px' }}
            navbarScroll
          >
            <Nav.Link style={{color:"white"}} href="/">Home</Nav.Link>
           
            {loginStatus ?
              <>
                <form onSubmit={handleLogoutSubmit}>
                  <Nav.Link style={{ color: "white" }} type='submit'>Logout</Nav.Link>
                </form>
                <NavDropdown style={{ color: "white" }} title="Your account" id="navbarScrollingDropdown">
                  <NavDropdown.Item href="#action3">Stored News</NavDropdown.Item>
                  <NavDropdown.Item href="#action4">History</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action5">Personal infomation</NavDropdown.Item>
                </NavDropdown>
              </>:
              <Nav.Link style={{color:"white"}} href="/login">Login</Nav.Link>
            }
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  )
}

3. 修正Login组件的表单提交行为 #

阻止表单默认刷新，确保登录状态能正确更新：

登录组件（Login）修正后：

const Login=(props)=>  {
  const handleLoginSubmit = (e) => {
    e.preventDefault(); // 阻止默认刷新
    props.onLogin();
  };
    
  return (
    <>
      <form onSubmit={handleLoginSubmit}>
        <Button type='submit' variant="primary">Primary</Button>
      </form>
    </>
  );
} 

export default Login;

关键修复点总结 #

• 状态尽量使用简单类型（如布尔值），避免不必要的对象包装，减少传递错误
• 表单提交必须阻止默认行为（e.preventDefault()），防止页面刷新丢失React状态
• 组件间传递的方法和属性名必须严格对应，避免拼写错误
• 避免在表单提交按钮上添加href，防止跳转打断逻辑执行

内容的提问来源于stack exchange，提问作者user20112858