Как частично поменять содержимое компонента при получении ответа от сервера? (react/redux-saga)
Есть компонент Header:
import * as React from 'react';
import { Link, NavLink } from 'react-router-dom';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';
export default function ButtonAppBar() {
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="menu"
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
<div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
<NavLink to="/">
Home
</NavLink>
<Box style={{ display: 'flex', justifyContent: 'space-between', width: '150px' }}>
<Link to="/login" color="inherit" className="links">Login</Link>
<Link to="/registration" color="inherit" className="links">Registration</Link>
</Box>
</div>
</Toolbar>
</AppBar>
</Box>
);
}
Нужно при получении успешного статуса ответа от сервера поменять Link'и регистарции/логина на Link личного кабинета пользователя. Примерно представляю себе это так:
isAuth
? <Link to="/profile" color="inherit" className="links">Profile</Link>
:(
<>
<Link to="/login" color="inherit" className="links">Login</Link>
<Link to="/registration" color="inherit" className="links">Registration</Link>
</>
)
Так вот, как мне получать isAuth true, когда клиент авторизован?