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;
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.
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.
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,
<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.<Main />
and wrap your original <App />
component layout in the newly created <Main />
. Create your <Login />
component as well with your login page layout /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
<Redirect to="/somePublicUrl" />
to make sure your app always render some view if url does not match any route pathI hope it helps. Let me know if something does not wrap your head.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With