هدف پیاده­ سازی یک routing ساده است.  برای این کار Routeها را در قسمت pathname از location وارد می­کنیم (جهت یادآوری به درس 2 رجوع شود).

روش­های متنوعی برای تعریف Route وجود دارد؛ در اینجا مثالی حل می­شود که هر Component (که نماینده یک page از برنامه هستند)، به عنوان children درون Component با نام Route قرار می­گیرند. درون Component با نام Route نیز props با نام path تعریف می­شود، که همان آدرس جایگزین شده در pathname از location است.

فرض کنید دو Component با نام­های Home و Nav که هرکدام نمایانگر یک page از برنامه هستند، داشته و می­خواهیم بین این صفحات پیمایش کنیم؛ کد فایل App.js به صورت زیر است:

import React from "react";
import Route from "./Router/Route";
import Home from "./Home/Home";
import Nav from "./Nav/Nav";
 
function App() {
 return (
  <>
   <Route path="/">
    <Home />
   Route>
   <Route path="/nav">
    <Nav />
   Route>
  >
 );
}
 
export default App;

همچنین کد Route.jsx نیز به صورت زیر است:

export default function Route({ path, children }) {
 const pathname = window.location.pathname;
 
 if (pathname !== path) {
  return null;
 }
 
 return children;
}