Routing in a nested React component - reactjs

Question

I ask you not to throw stones, because everyone once studied) The bottom line is this: I am writing a wishlist for myself and my friends, and I got stuck at a seemingly very stupid moment. The nested component is a header with navigation tabs and an exit button. While I am implementing the framework of the application, therefore, authorization occurs simply by loggedInUser /!loggedInUser. Actually, when you click on the exit button, an empty string is dispatched in loggedInUser and history.push ('/ login'). In the debugger, I see that the dispatch is happening and the location is pushed to the history, but for some reason, the rendering condition will not be fulfilled. I ask the help of knowledgeable people. I suppose that I messed up with routing somewhere, since I read that BrowserRouter for some reason is not used, but without it nothing works at all. In general, thanks in advance!
Entry:
const history = createBrowserHistory()
ReactDOM.render(
<Router history={history}>
<Provider store={store}>
<App />
</Provider>
</Router>,
document.getElementById('root')
);
Routing component:
interface AppProps {
loggedInUser: string;
}
class App extends React.Component<AppProps & RouteComponentProps> {
state = {
loggedInUser: ""
}
render() {
const history = this.props
return (
<>
<BrowserRouter>
<Segment>
<Switch>
<Route history={history} path='/login' render={() => (!this.props.loggedInUser ? <LoginPage /> : <Redirect to="/account" />)}/>
<Route history={history} path='/account' render={() => (this.props.loggedInUser ? <AccountPage/> : <Redirect to="/login" />)}/>
<Route history={history} path='/friendslist' render={() => (this.props.loggedInUser ? <FriendsList/> : <Redirect to="/login" />)}/>
<Redirect from='/' to='/login' />
</Switch>
</Segment>
</BrowserRouter>
</>
)
}
}
const mapStateToProps = (state: StateInterface): AppProps => ({
loggedInUser: state.loggedInUser
})
export default connect(mapStateToProps)(withRouter(App))
Nested component (it is rendered in each of the routed components):
interface HeaderProps extends HeaderPropsFromState{
activeItem: string;
}
interface HeaderPropsFromState{
loggedInUser: string;
}
class Header extends React.Component<HeaderProps & RouteComponentProps> {
state = {
activeItem: this.props.activeItem,
}
handleItemClick = (e: any, { name }: any) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
const { match, history } = this.props
return (
<Menu pointing>
<Menu.Item
name='Friends'
active={activeItem === 'Friends'}
onClick={this.handleItemClick}
as={Link}
to="/friendslist"
/>
<Menu.Item
name='Account'
active={activeItem === 'Account'}
onClick={this.handleItemClick}
as={Link}
to="/account"
/>
{activeItem === 'Friends' &&
<Menu.Menu position='right'>
<Menu.Item>
<Input icon='users' iconPosition='left' placeholder='Search users...' />
{/* TODO: create function to filter by friend's name */}
</Menu.Item>
</Menu.Menu>
}
{activeItem === 'Account' &&
<Menu.Menu position='right'>
<Menu.Item>
<Button basic
color='black'
onClick={() => {
console.log(this.props.loggedInUser)
store.dispatch(setLoggedInUser({username: ""}))
history.push('/login')
}}
>Exit</Button>
{/* TODO: create function to exit from account */}
</Menu.Item>
</Menu.Menu>
}
</Menu>
)
}
}
const mapStateToProps = (state: StateInterface): HeaderPropsFromState => ({
loggedInUser: state.loggedInUser
})
export default connect(mapStateToProps)(withRouter(Header))
UPD: Component that includes the header component.
class FriendsList extends React.Component{
users = [...users objects]
render() {
const usersList = this.users.map((user: User, index: number) =>
<OneFriendWishes user={user} key={index}/>
)
return (
<>
<Header activeItem={"Friends"}/>
{usersList}
</>
)
}
}
export default FriendsList