Изменение содержимого панели навигации при проверке подлинности

Question

Я пытаюсь изменить содержимое панели навигации с входа / регистрации на другие вещи, такие как профиль, после входа пользователя в систему. Мой сервер отправляет 401, когда пользователь не вошел в систему, и у меня есть HOC (RequireAuth.js), который проверяет то же самое для защищенных маршрутов и перенаправляет их для входа в систему, если они не вошли в систему. Однако я не мог придумать способ изменить содержимое панели навигации с помощью этой логики, и мне было интересно, есть ли хороший способ сделать это (я делаю не хочу использовать Redux для этой цели, если это возможно).

RequireAuth.js

const RequireAuth = ( Component ) => {

    return class Apps extends React.Component {
        state = {
            isAuthenticated: false,
            isLoading: true
        }

        checkAuthentication = async() => {
            const url = '/getinfo'
            const json = await fetch(url, {method: 'GET'})
            if (json.status !== 401)    {
                setTimeout(
                function() {
                    this.setState({isAuthenticated: true, isLoading: false});}.bind(this), 1500);
            } else {
                setTimeout(
                function() {
                    this.setState({isLoading: false});}.bind(this), 1500);
            }
        }

        componentDidMount() {
            this.checkAuthentication()
        }

        render() {
          const style = {position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
            console.log(this.state.isLoading)
           const { isAuthenticated, isLoading } = this.state;
           if(!isAuthenticated) {
               return this.state.isLoading? <div style={style}><PacmanLoader color={'#36D7CC'}/></div> : <Redirect to="/" />
           }
           return <Component {...this.props} />
        }
    }
}

export { RequireAuth }

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const NotFoundComponent = () => <div>404 NOT FOUND</div>
  return (
    <div>
      <Router>
            <NavigationBar />
            <Switch>
              <Route exact path = '/'
                component = {LandingPage}
              />
              <Route exact path = '/register'
                component = {Register}
              />
              <Route exact path = '/Profile'
                component = {RequireAuth(Profile)}
              />
              <Route exact path = '/About'
                component = {RequireAuth(About)}
              />
              <Route exact path = '/Name'
                component = {RequireAuth(Name)}
              />
              <Route path="*" component = {NotFoundComponent}/>
            </Switch>
      </Router>
    </div>
  );
}
}

export default withRouter(App);

Navigation.js

class NavigationBar extends React.Component {

  constructor(props) {
    super(props);
  }

render() {
    return (
        <Navbar bg="dark" variant="dark" expand="lg">
          <Navbar.Brand >Hello</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ml-auto">
              <Nav.Link as={Link} to='/'>Login</Nav.Link>
              <Nav.Link as={Link} to='/register'>Register</Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
    )
  }
}

export default withRouter(NavigationBar);