score:2
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;
Source: stackoverflow.com
Related Query
- React Where to place login page for a one page app with a side menu
- React SSR(Server Side Rendering) for SEO before login and after login Create React App (CRA). How to do this in one project folder?
- Redux: where to place interaction with the DOM, that is triggered by an action but changes outside of the React app
- Is it possible to place simple app with React and MobX within one html page?
- How to update side menu item list in an ionic react app after login
- With react , I am trying to add a section where it shows facts for 5 second intervals. No error shown, but the facts aren't appearing on the page
- Redirecting to home page after login conflicts with removing protected routes for logged in users | React
- How to add CSS server side render for React Next app with Material-ui
- Can not Login with credentials of any other user than the one created at first place Mongodb and react
- React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
- Where to store WebRTC streams when building React app with redux
- How can I create a custom page with #react-admin without the menu sidebar like login page?
- How to implement the OAuth2 Authorization code grant with PKCE for a React single page application?
- Using Jquery and Bootstrap with Es6 Import for React App
- Where to place logic for loading initial server data in React app?
- React warns about passed prop with value null, where the PropType for the prop is not required
- react-router throwing 404 upon page refresh with React app hosted on GoDaddy
- How to deploy React App on production with Server Side Rendering
- How to use Turborepo for an existing react app created with Create React App in order to make it a monorepo?
- How to apply react-native-linear-gradient for the entire app background with React Native
- setup localStorage for testing React app with jest
- React app showing page with "404 the requested path could not be found" when using Apache
- How to deploy react app to Github pages for personal page
- How to trigger onClose for react ui Menu with react-testing-libray?
- A/B testing for React SSR app with chunking
- how to run my node application and react app in the same time with one command?
- login and register in One page using React
- page title not available with jest/enzyme for testing react app, how to get the title?
- sec_error_inadequate_key_usage in firefox for react app with https=true & host=yyy
- How do i make a react app redirect to the login page after registration?
More Query from same tag
- You may need an appropriate loader to handle this file type
- How to make Expo.takeSnapshotAsync work on Android
- loading json data from local file into React JS
- How to order ascending by highest price using React?
- Refactor React.js code for style and efficiency
- How to handle if any json files are failed to load in react-i18next
- TypeError: date[("get" + method)] is not a function in React-big-calendar
- React data shows in console.log but tells me its undefined when trying to render
- How to upload file to Django rest framework API using Axios and react hook form?
- How can I use a React component in other component?
- How to enable submit button When I entered data in all input tags in the form
- MongoDB aggregate lookup not working with multiple parameters
- How to hide a column on Material UI based on certain criteria?
- GET_SUCCESS in reducer test returns undefined
- facing issues in npm install packages
- Can't render data from API being passed down as props (ReactJS)
- Is it more efficient to check function props existence before calling them in React or to provide empty function as default prop for them?
- Why does React not allow you to bind an event to a function?
- How to preventDefault() on form onSubmit in react/redux project
- Adding hashrouter to routes makes 'push' to stop render components
- Render JSX inside ReactMarkDown
- Animate children when hover at parent with Framer-motion
- How to pass Unique Id in Graphql query
- Pass multiple argument to back-end API reactjs
- Invalid prop `children` supplied to `DropdownItem` expected a ReactNode
- React render style based on number of elements in an Array
- How do I select/unselect in redux?
- ReactJS: Warning: setState(...): Cannot update during an existing state transition
- How to set headers for a React app created using 'create-react-app'
- How to sort by specific order in React?