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
- How to interact with input in Reactjs - How to handle state and event of input element in React apps
- How to render mongo object in Reactjs - How to render MongoDB object/ObjectId in React/MERN app
- How to render mongo document in Reactjs - How to render mongo document in react component
- How to render list of mongo objects in React component - How to render list of mongo objects in Reactjs
- How to place custom route links in Reactjs component - How to place custom links to routes/page in Reactjs
- How to filter MongoDB object list in express-node app - How to filter a mongo object list in document in express-node app
- How to fix mongo object Type error in Reactjs - How to fix TypeError/undefined in React - MERN application
- How to create multi page app with Reactjs - How to create a multi routed app with Reactjs app
- How to make GET API request in Reactjs - How to make GET API call in Reactjs
- How to make POST API request in Reactjs - How to make POST API call in Reactjs
