Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Login Page Separated From Single-page Application (SPA) in ReactJS

I am developing a single-page application (SPA) in ReactJS, and I would like to know how can I have the Login page in a separate page.

I am using create-react-app as a base for my application, and I am currently defining the template for my SPA in the App.js file, and each component in a different .js file: Page1.js, Page2.js, etc. I am using react-router-dom (V ^4.2.2) for the routing of my app.

My App.js file:

//node_modules (using ES6 modules)
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

//others
import { Home } from './pages/Home.js';
import { Page1 } from './pages/Page1.js';
import { Page2 } from './pages/Page2.js';

//App variables
const { Content, Footer, Sider } = Layout;

class App extends Component {
  render() {
    return (
      <Router>
        <Layout>
          <Sider>
             //some code
          </Sider>
          <Layout>
            <Header>
             //some code
            </Header>
            <Content>
              <Route exact path="/" component={Home}/>
              <Route path="/page1" component={Page1}/>
              <Route path="/page2" component={Page2}/>
            </Content>
            <Footer>
             //some code     
            </Footer>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

export default App;
like image 735
Julia Avatar asked Dec 13 '17 09:12

Julia


People also ask

How do I pass ID from one page to another in React?

You can use the Link component from react-router and specify to={} as an object where you specify pathname as the route to go to. Then add a variable e.g. data to hold the value you want to pass on. See the example below.

Is React single page app or multi page?

React is great for single page applications because it allows developers to create applications that are mobile first and responsive. React allows developers to create applications that are fast and easy to update, which is great for mobile applications.


1 Answers

Before jumping to your codes, note that,

The Route in react-route-dom (aka react router v4 and above ) is just a Component where it may be StatelessComponent or ComponentClass that render a view. you can reference here,
https://reacttraining.com/react-router/web/guides/philosophy

In your question ,

I would like to know how can I have the Login page in a separate page

if you meant you want to render the Login view without Layout then you might want to do this way,

in App.js

import Main from './Main';    // Your original <App /> page
import Login from './Login';  // Your new <Login /> page  

// In your App component  

<Router>  
  <Switch>
    <Route exact path="/" component={Main} />  
    <Route path="/login" component={Login} /> 
  </Switch>
</Router>

// Export your App component

There are few points i would like to mention here,

  1. I add <Switch> that contains one or more than one <Route /> as it will make sure your app only render one view from Route ( Remember <Route /> is just component that render view based on your matching path with url ). Therefore you may want to wrap your <PageABC /> with <Switch /> otherwise it will render all views in the background.
    Reference: https://reacttraining.com/react-router/web/api/Switch
  2. Try create a new component <Main /> and wrap your original <App /> component layout in the newly created <Main />. Create your <Login /> component as well with your login page layout
  3. It will do the job that separate your main content with your login page but this won't do anything to authenticate user. You can basically freely go to login page by visiting /login on URL and back to main page by / on URL. If you want to create Authorised and Unauthorised route you can check this tutorial out All About React Router 4
  4. Optionally you can add <Redirect to="/somePublicUrl" /> to make sure your app always render some view if url does not match any route path

I hope it helps. Let me know if something does not wrap your head.

like image 142
loala.js Avatar answered Sep 22 '22 14:09

loala.js