Next, we’ll integrate our Router into the index.js file.
Example
Use React Router to navigate to different pages based on the URL.
index.js:
import ReactDOM from "react-dom/client";
import { BrowserRouter , Routes , Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
export default function App() {
return (
<BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="blogs" element={<Blogs />} /> <Route path="contact" element={<Contact />} /> <Route path="*" element={<NoPage />} /> </Route> </Routes> </BrowserRouter>
); }
const root = ReactDOM .createRoot(document .getElementById('root'));
root .render(<App />);
|
Example Explained
First, wrap the content with <BrowserRouter>
and set up <Routes>
, which can handle multiple routes, though this example has one. The main <Route>
with the path /
renders the Layout component, while nested routes like /blogs
extend from it, and the *
path serves as a catch-all for 404 errors.
Pages / Components
The Layout component includes <Outlet> and <Link> elements. The <Outlet> renders the content of the current route, while <Link> is used for internal navigation and to manage browsing history. The “layout route” is a shared component that provides common elements, like a navigation menu, across all pages.
Layout.js:
import { Outlet , Link } from "react-router-dom";
const Layout = () => {
return (
<> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/blogs">Blogs</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav>
<Outlet /> </>
) };
export default Layout ;
|
Home.js:
const Home = () => {
return <h1>Home</h1>;
};
export default Home ;
|
Blogs.js:
const Blogs = () => {
return <h1>Blog Articles</h1>; };
export default Blogs ;
|
Contact.js:
const Contact = () => {
return <h1>Contact Me</h1>; };
export default Contact ;
|
NoPage.js:
const NoPage = () => {
return <h1>404</h1>; };
export default NoPage;
|