Today you will learn about the React Router and at we will implement React Router on our project.
Table Of Contents
- What is React Router?
- Creating New Project
- How to install the React Router?
- Routing
What is React Router
React Router is a routing library which is used to create routing in React app. After the v4 the React Router works dynamically, previously it was static.
Creating New Project
npx create-react-app react-route
cd react-route
How to install the React Router?
Run the below command to download react-router-dom package.
npm install react-router-dom //download and install the package
npm start //start development server
Routing
After starting the server you can view the app from http://localhost:3000. Open the project in your favorite editor and navigate to public/index.html. Here is the updated code of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>React Router Example</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</html>
Now we have to create component for our app. Create a folder under src named components. Create three file Navbar.js, About.js, Contact.js
Edit Navbar.js and paste this code
import React from 'react'
import {Link} from 'react-router-dom';
class About extends React.Component {
render() {
return <div
className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 className="my-0 mr-md-auto font-weight-normal"><Link className="p-2 text-dark" to="/">React Router Example</Link></h5>
<nav className="my-2 my-md-0 mr-md-3">
<Link className="p-2 text-dark" to="/about">About</Link>
<Link className="p-2 text-dark" to="/contact">Contact</Link>
</nav>
</div>
}
}
export default About
Edit About.js and paste this code
import React from 'react'
class About extends React.Component {
render() {
return <div className="card">
<div className="card-header">
About
</div>
<div className="card-body">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
}
}
export default About
Edit Contact.js and paste this code
import React from 'react'
class Contact extends React.Component {
render() {
return <div className="card">
<div className="card-header">
Contact
</div>
<div className="card-body">
<form>
<div className="form-group">
<label >Name</label>
<input type="text" className="form-control"
placeholder="Enter name"/>
</div>
<div className="form-group">
<label >Message</label>
<textarea className="form-control" id="message" name="message"
placeholder="Please enter your message here..." rows="5"/>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</div>
}
}
export default Contact
Now open App.js and paste these code
import React from 'react'
import {Link} from 'react-router-dom';
class App extends React.Component {
render() {
return (
<div className="card">
<div className="card-header">
Homepage
</div>
<div className="card-body">
<h1>Weclome to Homepage! Content shoing from App.js</h1>
</div>
</div>
)
}
}
export default App
Now we at at last part of our tutorial open index.js and update the code.
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link,Switch, BrowserRouter as Router } from 'react-router-dom'
import App from './App';
import NavBar from './components/Navbar'
import Contact from './components/Contact';
import About from './components/About';
const routing = (
<Router>
<div>
<NavBar/>
<section className="container">
<Switch>
<Route exact path="/" component={App} />
<Route exact path="/about" component={About} />
<Route exact path="/contact" component={Contact} />
</Switch>
</section>
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'))
Top comments (0)