How to create multi page app with Reactjs


Reactjs is UI library for Nodejs web projects which offer responsive web application. By default Reactjs project is one page application. You may wonder is all the React apps is one page apps ? No chance.

A route is a web page in a website / web app. A standard web app is consisting of many routes such as Home/Index Page, About, Contact etc

Routes

What is a route ? A route is a web page in a website / web app. A standard web app is consisting of many routes such as Home/Index Page, About, Contact etc. Each page has different content. If you were familiar with Python Flask app development, things becomes crystal clear.

How to create routes in React

To turn the one page Reactjs app into multi page app we have to use the BrouwserRouter and Router from the react-router-dom module.

import {BrowserRouter as Router,Route} from 'react-router-dom'
import  './bootstrap/dist/css/bootstrap.min.css'
import Home from './components/home.component'
import About from "./components/about.component";

function App() {
  return (
    <Router>
      <div className="container">  
      <br/>
      <Route path="/" exact component={Home}/>       
      <Route path="/about" exact component={About}/>
      </div>
       
    </Router>
  );

In the above example , we had created two routes with component, one for Home page and another for About Page.

The Route component is used to create new page in our app. The route has path and component props.

The path is used to define the route, ‘/’ is used for the default, which is used none of route is specified in the URL such as

http://localhost:3001

component define the Reactjs component is being used in the route which can be defined in a separate file, usually under Component folder.

That is all you need, following React post deserve your attention

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.