在 Routes 路由中调用 A 函数时，React 未按预期重定向

Question

我正在为我的一个 React 项目构建一个登录和注销系统。我有一个导航栏设置，我正在使用 react-redirect-dom 创建 links 并将 links 重定向到不同的页面以管理登录系统。

在当前项目中，我有一个路由在登录组件中对登录进行处理。我有另一个 link 在注册组件中处理注册。

对于注销，如果用户登录并使用 /logout 端点，我希望它立即调用 handleLogout 函数并将用户注销并重新路由到 /端点

这是我的代码和错误：

function App() {

  const [loggedIn, setLoggedIn] = useState(false)
  const [currentUser, setCurrentUser] = useState('')

  function handleLogout() {
    console.log('handle logout')
    axios.post('/api/auth/logout', {
      "username":currentUser.username,
      "password":currentUser.password,
    })
    .then((data) => {
      console.log(data.data)
      setCurrentUser(data.data)
      setLoggedIn(false)
      return(<Navigate to='/' />)
    })
    .catch((err) => {
      console.log(err)
    })
  }

  return (
    <div className="App">
      {/* <ContentContext value={contentContextValue}> */}
        <BrowserRouter>
          <Routes>
              <Route exact path="/" element={loggedIn ? <Feed/> : <Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>} />
              <Route exact path="/login" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>}/>
              <Route exact path="/signup" element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser}/>}/>
              <Route exact path="/logout" element={loggedIn ? () => {handleLogout()} : <Login/>}/>
            </Routes>
        </BrowserRouter> 
      {/* </ContentContext> */}
    </div>
  );
}

这里是错误：

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

****************** 更新 ************************

import React from 'react'

export default function Logout(props) {
  const {
    handleLogout
  } = props

  const Logout = ({ handleLogout }) => {
    const navigate = useNavigate();
    React.useEffect(() => {
      handleLogout();
      navigate("/", { replace: true });
    }, []);
  
    return null;
  };
  
  return (
    <div>
    </div>
  )
}

Answer 1

在 react-router-dom 版本 6 中，Route 组件采用 element 属性，该属性仅采用一个ReactElement，a.k.a。 JSX。正如警告指出的那样，在此处传递函数是无效的。

将您的注销逻辑重构到挂载 useEffect 挂钩中的一个组件中。调用传递的 handleLogout 函数，然后强制重定向到主 "/" 路径。

const Logout = ({ handleLogout }) => {
  const navigate = useNavigate();
  React.useEffect(() => {
    handleLogout();
    navigate("/", { replace: true });
  }, []);

  return null;
};

...

<Routes>
  <Route
    path="/"
    element={loggedIn
      ? <Feed />
      : <Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser} />
    }
  />
  <Route
    path="/login"
    element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser} />}
  />
  <Route
    path="/signup"
    element={<Login setLoggedIn={setLoggedIn} setCurrentUser={setCurrentUser} />}
  />
  <Route
    path="/logout"
    element={loggedIn
      ? <Logout handleLogout={handleLogout} />
      : <Login />
    }
  />
</Routes>

在 Routes 路由中调用 A 函数时，React 未按预期重定向

React not redirecting as intended when A function is called in the Routes route

javascript

reactjs

react-router-dom