Getting Started with React Router v6/

...

/

Implementing Routes in a React Application

Implementing Routes in a React Application

Learn to implement routes using the Route and Routes components in an application.

We'll cover the following...

Creating a route component

Our contact list application consists of the Contacts and Search components. Let’s separate them into two different pages by implementing Routes.

Open App.js from the coding widget given in the exercise section and write the following code:

import "./App.css";
import { Routes, Route } from "react-router-dom";
import Contacts from "./components/Contacts";
import Search from "./components/Search";
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/contacts" element={<Contacts />} />
        <Route path="/search" element={<Search />} />
      </Routes>
    </div>
  );
}
export default App;
Implementing routes

Line ...