Here are steps to Create Pages and Define Routes in React JS –
Step 1:
Create a folder “pages” under src folder.
Step 2:
Create page “About.jsx”, “Signin.jsx”, “SignUp.jsx”, “Dashboard.jsx” “Home.jsx”, “Projects.jsx”
Signin.jsx Page Code:
import React from ‘react’
const Signin = () => {
return (
<div>
<h1>Sign in Page</h1>
</div>
)
}
export default Signin
Signup.jsx Page Code:
import React from ‘react’
const Signup = () => {
return (
<div>
<h1>Sign up Page</h1>
</div>
)
}
export default Signup
Step 3:
Install a package for router
npm i react-router-dom
Step 4:
import react router dom in App.jsx using below code –
import {BrowserRouter, Route, Routes} from ‘react-router-dom’
Step 5:
Put Routes, Route in BrowserRouter tag
<BrowserRouter>
<h1 className=’text-3xl text-red-600′>React Blog</h1>
<Routes>
<Route path=’/signin’ element={<Signin/>}/>
<Route path=’/signup’ element={<Signup/>}/>
<Route path=’/projects’ element={<Projects/>}/>
<Route path=’/dashboard’ element={<Dashboard/>}/>
<Route path=’/’ element={<Home/>}/>
</Routes>
</BrowserRouter>
