To use React Router v6, you need to install two packages: react-router and react-router-dom. The first one contains the core functionality of the library, while the second one provides the browser-specific components and hooks. You can install them using npm or yarn:
Next, you need to import the BrowserRouter component from react-router-dom and wrap your app with it. This component creates a browser history object that keeps track of the URL changes and enables the navigation. For example, in your index.js file, you can do something like this:
Creating routes with React Router v6
To define the routes for your app, you need to use the Routes and Route components from react-router-dom. The Routes component is a container for all the possible routes in your app, while the Route component represents a single route that matches a path and renders a component. For example, in your App.js file, you can create three routes for the home, about, and contact pages:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
npm install react-router react-router-dom
# or
yarn add react-router react-router-dom
import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
export default App;
Notice that the Route component has two props: path and element. The path prop is a string that specifies the URL pattern that the route matches. The element prop is a React element that renders when the route matches. You can use any component you want as the element, as long as it returns a valid JSX.
Adding a navigation menu
To navigate between the routes, you need to use the Link component from react-router-dom. This component renders a <a> element that changes the URL without reloading the page. You can use the to prop to specify the destination path of the link. For example, you can create a simple navigation menu with three links:
import React from "react";
import { Link } from "react-router-dom";
function Nav() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}
export default Nav;
You can then include the Nav component in your App component, above the Routes component:
import React from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Nav from "./Nav";
function App() {
return (
<div className="App">
<Nav />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
);
}
export default App;
Now you can click on the links and see the corresponding components render below the menu.
Conclusion
In this blog post, I have shown you how to set up React Router v6 and create some basic routes in your React app. React Router v6 is a powerful and flexible library that allows you to create dynamic and user-friendly web applications. If you want to learn more about React Router v6, you can check out the official documentation or this interactive tutorial. Happy routing! 😊
.jpg)
0 Comments