In the post Routing in React With Example we saw how to configure routes with the help of an example. The problem with that example was to manually change the path. In a real application there will be links and navigation menu to move around different web pages. So, you need to link to your routes from your web pages and that can be done using Link and NavLink in React.
In this post we'll see how to use Link to create a link from one page to another and also how to use Link to create a navigational menu.
Link in React Router
In HTML you might have used anchor tag <a href=””> to create a link but using that directly in a React app will result in a full page load which is not what we need in Single page application. We should use Link or NavLink to create such links in a React app.
Link is a wrapper around <a href> to enable navigation with client-side routing. Link uses JavaScript and the browser's history API to update the page content.
Using Link to navigate from one page to another
Link has a "to" props which is used to specify the path that will be added to the URL once the link is clicked. That path is then used by routing definition to match it to the component that is called.
src\components\routes\Home.js
import { Link } from "react-router";
const Home = () => {
return (
<>
<h2>This is home page</h2>
<Link to="/about">About</Link>
</>
)
}
export default Home;
src\components\routes\About.js
const About = () => {
return <h2>This is about page</h2>
}
export default About;
App.js
That's where routing is configured.
import { BrowserRouter, Route, Routes } from 'react-router';
import About from './components/routes/About';
import Home from './components/routes/Home';
function App() {
return (
<>
<BrowserRouter >
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
With that if you access the root URL- http://localhost:3000/
Clicking on the "About" link will take you to the About page.
Creating Navigation Menu using Link in React Router
If you want to create a menu as a header that is always there and provides navigation across web application that also can be done using Link in React Router.
You can create a separate file for the menu, note that it uses Bootstrap 5 components for styling.
src\components\routes\Navigation.js
import { Link } from "react-router";
const Navigation = () => {
return(
<>
<nav className="navbar navbar-expand-lg bg-dark navbar-dark">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarMenu">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</div>
</div>
</nav>
</>
);
}
export default Navigation;
As you can see using "to" props, path is given with in the Link component.
App.js
Note that <Link/> cannot be rendered outside <BrowserRouter/> so you should add the Navigation component wrapped with in the BrowserRouter.
import { BrowserRouter, Route, Routes } from 'react-router';
import About from './components/routes/About';
import Home from './components/routes/Home';
import Navigation from './components/routes/navigation';
function App() {
return (
<>
<BrowserRouter >
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
With these changes if you access the root URL
Navigation menu with child routes and Outlet
In the above example we saw how to create a navigation menu with Link, it works fine but the recommended way to do it is to create routes as child routes of the route that specifies Navigation component as the "element" value.
import { BrowserRouter, Route, Routes } from 'react-router';
import About from './components/routes/About';
import Home from './components/routes/Home';
import Navigation from './components/routes/navigation';
function App() {
return (
<>
<BrowserRouter >
<Routes>
<Route path="/" element={<Navigation />}>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
As you can see Navigation component now acts as a parent route and other components are specified as the child routes.
In the Navigation component add the Outlet so that the matching child route of a parent route is rendered at the place specified by Outlet.
src\components\routes\Navigation.js
import { Link, Outlet } from "react-router";
const Navigation = () => {
return(
<>
<nav className="navbar navbar-expand-lg bg-dark navbar-dark">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarMenu">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link" to="/">
Home
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">
About
</Link>
</li>
</div>
</div>
</nav>
<Outlet />
</>
);
}
export default Navigation;
That's all for this topic Link in React Router With Example. If you have any doubt or any suggestions to make please drop a comment. Thanks!
Related Topics
You may also like-
