score:2

Accepted answer

the best solution i can figure out in terms of a clean design, is to implement another router in your app.jsx, because you are implementing the routing inside your component, and you need another one for your login page.

then, your app.jsx could be like this:

import react, { component } from "react";
import { redirect, route, switch } from "react-router-dom";
import login from "./pages/general/components/login";
import homepage from "./pages/general/components/homepage";
import "../src/css/app.css";

class app extends component {
  render() {
    return (
      <div>
        <switch>
            <route path={'/login'} component={login} />
            <route path={'/'} component={homepage} />
            <redirect to="/" />
        </switch>
      </div>
    );
  }
}

export default app;

then, for your homepage do the following

import react, { component } from "react";
import { hashrouter } from "react-router-dom";
import navigation from "./pages/general/components/navigation";
import sidemenu from "./pages/general/components/sidemenu";
import "../src/css/app.css";

class homepage extends component {
  render() {
    return (
      <div>
        <hashrouter>
          <div classname="main-wrapper">
            <sidemenu />
            <navigation />
          </div>
        </hashrouter>
      </div>
    );
  }
}

export default homepage;

i hope it helps!

score:0

here is my solution, it not exactly a solution, but it will give you a basic idea on how to implement this.

the idea is to place the login component in app.js, and conditionally display it if the user is logged in.

you will have to pass a handler function to login component through which you will be able to control app.js state.

when login will be sucessfull, u can show the navigation and sidemenu component.

import { fragment } from "react";
import login from "path/to/login";
class app extends component {
  state = { isloggedin: false };

  loginhandler = () => {
    this.setstate({
      isloggedin: true
    });
  };
  render() {
    return (
      <div>
          <div classname="main-wrapper">
            {isloggedin ? (
              <fragment>
                <sidemenu />
                <navigation />
              </fragment>
            ) : (
              <login loginhandler={this.loginhandler} />
            )}
          </div>
      </div>
    );
  }
}

also you need write a separate router file, which will contain the main app. this is used to show the app component when navigated to /

import react from 'react';
import { hashrouter, route } from 'react-router-dom';
import app from './app';

const mainroute = () => (
    <hashrouter>
        <route path="/" component={app} />
    </hashrouter>
);
export default mainroute;

Related Query

More Query from same tag