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 clear all element in mongoose object array in Nodejs - How to clear elements in a mongodb object array
- Use dotenv to store configurations in Reactjs - use dotenv in Reactjs to store API base URL
- How to export multiple components in Reactjs - How to render export multiple components in React
- How to create ant row design for Reactjs - Quickly create a row design using Ant Design customize UI for React component
- Ant layout for Reactjs apps - How to create a app layout with Ant Design UI Kit in Reactjs
- How to render child components in Reactjs - How to render child components in React
- How to add element to mongoose object array in Nodejs - How to add element to a mongodb object array
- 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
