React Router is the library for routing within the react app. For react router to run within the react app we need to install react-router-dom in our react app. To install we run the following command in the terminal.
$ npm install react-router-dom
In order to build a fully functional react app with routing enabled we need to import BrowserRouter, Routes and Route within the app. <BrowserRouter> is the recommended interface for running React Router in a web browser, whereas Routes and Route defines the routes actually. Routes is the parent component while Route is the child component. Routes contain multiple Route elements.
Route contains two components inside it one is path another is the element which is rendered when the url matches the path.
<Route exact path='link' element={<Link>}
We will create following files inside our /src directory, App.js, , Head.js, Link0.js, Link1.js, Link2.js, Link3.js, Link4.js.
Dependencies: We will install the necessary dependecies for react router app to run smoothly in this case apart from react-router-dom, we need to install bootstrap only.
Create your App.js file
Import the App.js file in your index.js file for the react app to run successfully.
App.js
import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import NoPage from './NoPage'
import Link1 from './Link1'
import Link2 from './Link2'
import Link3 from './Link3'
import Link4 from './Link4'
import Link0 from './Link0'
import Head from './Head'
function App(){
return(
<>
<BrowserRouter>
<Head/>
<Routes>
<Route exact path="/" element={<Link0/>}/>
<Route exact path="/link1" element={<Link1/>}/>
<Route exact path="/link2" element={<Link2/>}/>
<Route exact path="/link3" element={<Link3/>}/>
<Route exact path="/link4" element={<Link4/>}/>
<Route path="*" element={<NoPage />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Build Head.js files
Next will create the Navbar component which will contain all the links of our react app.
Head.js
import React from "react";
import { Navbar } from "react-bootstrap";
import {Container} from "react-bootstrap";
import { Nav } from "react-bootstrap";
const Home = () => {
return(
<>
<Navbar bg="light" expand="lg">
<Container>
<Navbar.Brand className='mx-5' href="/">React-Router</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link className="mx-2" href="/">Home</Nav.Link>
<Nav.Link className="mx-2" href="/link1">About</Nav.Link>
<Nav.Link className="mx-2" href="/link2">Courses</Nav.Link>
<Nav.Link className="mx-2" href="/link3">Instructors</Nav.Link>
<Nav.Link className="mx-2" href="/link4">Testimonials</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
}
export default Home;
Build Link.js files
Our next job is to build files one by one which will render the link components within the app.
Link0.js
import React from "react";
import { Container } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
const Link0 = () => {
return(
<>
<Container className="text-center pt-5">
<h1>Home</h1>
</Container>
</>
);
}
export default Link0;
Link1.js
import React from "react";
import { Container } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
const Link1 = () => {
return(
<>
<Container className="text-center pt-5">
<h1>Abouts</h1>
</Container>
</>
);
}
export default Link1;
Link2.js
import React from "react";
import { Container } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
const Link2 = () => {
return(
<>
<Container className="text-center pt-5">
<h1>Courses</h1>
</Container>
</>
);
}
export default Link2;
Link3.js
import React from "react";
import { Container } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
const Link3 = () => {
return(
<>
<Container className="text-center pt-5">
<h1>Instructors</h1>
</Container>
</>
);
}
export default Link3;
Link4.js
import React from "react";
import { Container } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
const Link4 = () => {
return(
<>
<Container className="text-center pt-5">
<h1>Testimonials</h1>
</Container>
</>
);
}
export default Link4;
Published on 9 July, 2022
