How to Install React Router
To install React Router run npm install react-router-dom@6 in your react project terminal
If you are using yarn then use this command: yarn add react-router-dom@6.
Set Up
To do this, open the index.js file in the src folder and import BrowserRouter from react-router-dom and then wrap the root component
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
How to Route to Other Components
Step 1 : Create multiple components
We'll create the following Home , About ,and Contact components like this:
Home component
const Home=()=> {
return (
<div>
<h1>This is the home page</h1>
</div>
);
}
export default Home;
About component
const About=()=> {
return (
<div>
<h1>This is the About page</h1>
</div>
);
}
export default About;
Contact component
const Contact=()=> {
return (
<div>
<h1>This is the Contact page</h1>
</div>
);
}
export default Contact;
Step 2 : Define routes
The Appcomponent acts as the root component that our React code initially renders, so we will create all our routes there.
import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
function App() {
return (
<div>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/about" element={ <About/> } />
<Route path="/contact" element={ <Contact/> } />
</Routes>
</div>
)
}
export default App
Routesacts as a container for all the individual routes that created in the app.
Routeis used to create a single route, It takes in two attributes:
pathwhich specifies the URL path of the desired component. you'll notice that the first pathname is a backslash (/)which will get rendered first whenever the app loads for the first time. This implies that the Home component will be the first component to get rendered.elementwhich specifies the component the route should render.
Step 3 : navigate to routes
We will use Linkto navigate between pages/components
The Link component is like element <a> in HTML. Its to attribute specifies which path the link takes you to.
we will create a new component called Navbar.js like this and navigate between components
import { Link } from "react-router-dom";
const Navbar=()=> {
return (
<div>
<h1>This is the home page</h1>
<Link to="/about">Click to view our about page</Link>
<Link to="/contact">Click to view our contact page</Link>
</div>
);
}
export default Navbar;
So the Appcomponent will be like this
import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
import Navbar from "./Navbar"
function App() {
return (
<div>
<Navbar/>
<Routes>
<Route path="/" element={ <Home/> } />
<Route path="/about" element={ <About/> } />
<Route path="/contact" element={ <Contact/> } />
</Routes>
</div>
)
}
export default App
Top comments (0)