React Router
The Create React App tool does not contain page routing.
React Router is the most popular solution.
Add React Router
To add React Router to your application, perform the following in the terminal from the application’s root directory:
npm i -D react-router-dom
NOTE: This tutorial utilizes React Router v6.
If you are updating from version 5, you will need to use the @latest flag.
npm i -D react-router-dom@latest
Folder Structure
To develop an application with several page routes, we’ll start with the file structure.
Within the src folder, we’ll build a folder called pages containing numerous files.
src\pages\:
- Layout.js
- Home.js
- Blogs.js
- Contact.js
- NoPage.js
Each file will have a very basic React component.
Basic Usage
We will now use our Router in the index.js file.
Example
Use React Router to route pages depending on URLs:
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
We wrap our content first with <BrowserRouter>.
Then, we specify our <Routes>. An application may have several <Routes>. Our basic example only needs one.
Routes can be nested. The first <Route>, with a route of /, renders the Layout component.
The nested <Route>s inherit and extend the parent route. So the blogs path is concatenated with the parent, resulting in /blogs.
The Home component route does not contain a path, but rather an index attribute. That makes this route the default path for the parent route, which is /.
Setting the path to * serves as a catch-all for any unknown URLs. This is ideal for a 404 error page.
Pages / Components
The Layout component has <Outlet> and <Link> components.
The <Outlet> displays the current route selected.
<Link> sets the URL and tracks surfing history.
When linking to an internal path, we shall use <Link> instead of <a href=””>.
The “layout route” is a shared component that adds common material to all pages, such as a navigation menu.
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;
