Render Not Displaying HTML

I added a Component that changes the page depending on what is in the view property like the one below. When updateView is called it changes what is in the view.

import {
    h,
    render,
    Component
} from 'preact';
import Home from './home';
import Status from './Status';

let view;
class Pages extends Component {
    constructor() {
        super();
        view = <Status />
    }
    updateView(redirect, state) {
        switch (redirect) {
            case "HOME":
                view = <Home state={state} />
                break;
                }
    getView() {
        return view;
    }
    reset() {
        view = <Status />;
    }
}
const PagesInstance = new Pages();
export default PagesInstance;

The below class is updated and it shows whatever is in in the view.

import {
    h,
    render,
    Component
} from 'preact';
import objectAssign from 'object-assign';
import Login from './login';
let viewReference = null;
export default class AuthenticatedRoute extends Component {
    constructor() {
        super();
        this.onChange = this.onChange.bind(this);
        this.setState(AuthStore.getState());
    }
    componentDidMount() {
        AuthStore.addChangeListener(this.onChange);
        UserStore.addChangeListener(this.onChange);
    }
    componentWillUnmount() {
        AuthStore.removeChangeListener(this.onChange);
        UserStore.removeChangeListener(this.onChange);
    }
    onChange() {
        this.setState(AuthStore.getState());
    }
    render() {
        if (!AuthStore.getState().loggedIn) {
            return <Login />;
        } else {
            if (UserStore.getView() != viewReference) { 
                viewReference = objectAssign({}, UserStore.getView());
                return UserStore.getView();
            }
        }
    }
}

The issue is that even though most of the other Components display, when someone log out the <Login /> rendered JSX or even just a div doesn’t display. At the beginning it work just fine. The console even logs that it is constructed and rendered after the update has occured, but nothing shows and there is not a div. Can you give an any reason why this is happening? Below are the rest of the classes just in case they may be useful.

import {
    h,
    render,
    Component
} from 'preact';

export default class Login extends Component {
    constructor() {
        super();
        console.log("Login Constructed");
       }
    render() {
        console.log("Login Rendered");
        return <div>
                LOGIN
            </div>
    }
}

The UserStore only gets the view from the page component.

import Pages from '../pages';
class UserStore extends FluxStore {
    constructor() {
        super();
    }
    getView() {
        return Pages.getView();
    }
}

[developit]

You can manually specify a URL for preact-router, which makes it ignore the browser’s URL. That “url” can actually just be a component name.

However, if you just want to conditionally render components based on a view or some state (like “is logged in”), you could just use conditionals:

class Views extends Component {
  state = {
    view: this.props.view   // can pass default view in as a prop
  };

  // route to a given view
  route = view => {
    this.setState({ view });
  };

  // child components can call:  this.context.route('some-view');
  getChildContext() {
    return { route: this.route };
  }

  render({ children }, { view }) {
    // just render the child whose `name` prop matches the current view:
    return children.filter( child => child.attributes.name===view )[0] || null;
  }
}

// Trick: for logged-out, skip the router/views entirely:
class App extends Component {
  // initialize our state to the auth store's state:
  state = AuthStore.getState();

  onChange = () => {
    this.setState(AuthStore.getState());
  };

  componentDidMount() {
    AuthStore.addChangeListener(this.onChange);
  }

  componentWillUnmount() {
    AuthStore.removeChangeListener(this.onChange);
  }

  render(props, state) {
    // if logged out, always force the login view:
    if (!state.loggedIn) {
      return <Login />;
    }
    return (
      <Views view="home">
        <Home name="home" />
        <Other name="other" />
      </Views>
    );
  }
}

class Home extends Component {
  // switch to the "Other" view
  goOther = () => {
    this.context.route('other');
  };
  render() {
    return (
      <div>
        <a onClick={this.goOther}>Other</a>
      </div>
    );
  }
}

Here’s a working demo of the above setup (I just mocked out your Flux store for the demo): https://jsfiddle.net/developit/k487h3t5/

---

Edit: It’s probably worth noting that you can wrap up the routing stuff into a <Link /> component much like preact-router did/does:

/** <Link to="home">Home</Link> */
const Link = ({ to, ...props }, context) => (
  <a onClick={ () => context.route(to) } {...props} />
);

[developit]

I’m going to close this one out since we solved the original question, but please feel free to chat 👍