11

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;
Julia
  • 489
  • 5
  • 18

1 Answers1

10

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.

vsync
  • 87,559
  • 45
  • 247
  • 317
loala.js
  • 141
  • 2
  • 10
  • 1
    Good answer, I understood what you meant after seeing this example: https://avinmathew.com/multiple-layouts-with-react-router-v4/ – cass Jun 07 '18 at 17:28
  • 1
    I implemented this method and it works, however, now the `/page1` path only works with the react link. If you type in the `/page1` into the browser it does not display anything – GavinBelson Mar 21 '19 at 00:04
  • I have a similar result as @GavinBelson, my default route "/" works but I fall through to my 404 page for any other route (/page1, for example) – user210757 Sep 27 '19 at 17:41
  • Here's an example of how this solution isn't working for me - am I missing anything? https://codesandbox.io/s/react-router-redirects-auth-f582f?from-embed – user210757 Sep 30 '19 at 20:33