React 组件在重定向之前而不是在重定向之后呈现到屏幕

Question

我有一个注销菜单，单击注销时会调用组件并将页面重定向到 /logout。

我想在页面重定向到 /logout 屏幕后呈现 MSLogin div，但在重定向页面之前呈现 div。

我怎样才能达到预期的效果？请问有人可以帮我解决这个问题吗？

export function AccountMenu(props){
const [renderMSLogin, setMSLogin] = useState(false);

<div>
<a href='/api/auth/logout' className='list-item logout'
          onClick={()=>setMSLogin(!renderMSLogin)} >logout</a>
</div>

{renderMSLogin ? <Logout /> : null}
}

这是我的注销组件

export function Logout() {
    return(
        
            <MSLogin/>
        
        );
    }

这是我的 MSLgin 组件

export function MSLogin(){

    return(
        <div className='login'>
            <div className='login-container'>
                <div className='login-box'>
                    <div className='welcome-text'>{'Welcome'}</div>
                    <a className='sign-in-link' href='/api/auth/login'>
                        <img src={mslogin} className="ms-img" alt="Microsoft" />
                        {'Sign in with Microsoft'}
                    </a>
                </div>
                <div className='spacer' />
            </div>
        </div>
    );
}

谢谢！

Answer 1

您应该使用history.push() 在 React js 中的 2 个页面之间导航。试试这个：

在AccountMenu.js:

import { withRouter } from 'react-router'

const AccountMenu = ({history}) => {
  handleOnClick = () => {
    history.push('/api/auth/logout')
  }
    
  return <div className='list-item logout' onClick={handleOnClick} >logout</div>
}

export default withRouter(AccountMenu)

在App.js:

import { Route, Switch } from 'react-router-dom'

import Logoutfrom 'path_to_Logout.js'

const App = () => {
  ...
  return (
    <Switch>
      ...
      <Route path='/api/auth/logout' component={Logout} />
      ...
    </Switch>
  )
}

export default App