This is my memo when I try two different ways of putting a navigation bar to all pages with React Router.
Create Layout component
The file structure inside of src is the below.
src
-components
-layout
-Layout.jsx
-Navigation.jsx
-pages
-Home.jsx
-Page1.jsx
-Page2.jsx
-Page3.jsx
App.js
index.js
styles.css
Navigation.jsx
import { Link } from "react-router-dom";
import styled from "styled-components";
const NavigationContainer = styled.div`
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
`;
const LinksContainer = styled.div`
display: flex;
justify-content: space-around;
gap: 10px;
`;
const Navigation = () => {
return (
<NavigationContainer>
<Link to="/">
<h1>Logo</h1>
</Link>
<LinksContainer>
<Link to="/page1">Page1</Link>
<Link to="/page2">Page2</Link>
<Link to="/page3">Page3</Link>
</LinksContainer>
</NavigationContainer>
);
};
export default Navigation;
Layout.jsx
import Navigation from "./Navigation";
const Layout = ({ children }) => {
return (
<>
<Navigation />
<main>{children}</main>
</>
);
};
export default Layout;
App.js
import { Routes, Route } from "react-router-dom";
import Layout from "./components/layout/Layout";
import Home from "./pages/Home";
import Page1 from "./pages/Page1";
import Page2 from "./pages/Page2";
import Page3 from "./pages/Page3";
import "./styles.css";
export default function App() {
return (
<Layout>
<Routes>
<Route path="/" element={<Home />} />
<Route path="page1" element={<Page1 />} />
<Route path="page2" element={<Page2 />} />
<Route path="page3" element={<Page3 />} />
</Routes>
</Layout>
);
}
The whole code is available here.
Leverage Outlet and index
We can leverage nested routes and outlet so that Navigation route can be a parent route and all other pages to be its children.
Here is the explanation by the official document.
Nested Routes — Because routes can have children and each route defines a portion of the URL through segments, a single URL can match multiple routes in a nested “branch” of the tree. This enables automatic layout nesting through outlet, relative links, and more.
The file structure inside of src is the below.
src
-routes
-Home.jsx
-Navigatoin.jsx
-Page1.jsx
-Page2.jsx
-Page3.jsx
App.js
index.js
styles.css
Navigation.jsx
import { Link, Outlet } from "react-router-dom";
import styled from "styled-components";
const NavigationContainer = styled.div`
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
`;
const LinksContainer = styled.div`
display: flex;
justify-content: space-around;
gap: 10px;
`;
const Navigation = () => {
return (
<>
<NavigationContainer>
<Link to="/">
<h1>Logo</h1>
</Link>
<LinksContainer>
<Link to="/page1">Page1</Link>
<Link to="/page2">Page2</Link>
<Link to="/page3">Page3</Link>
</LinksContainer>
</NavigationContainer>
<Outlet />
</>
);
};
export default Navigation;
App.js
Use index attribute to navigate the same path as the parent path.
import { Routes, Route } from "react-router-dom";
import Navigation from "./routes/Navigation";
import Home from "./routes/Home";
import Page1 from "./routes/Page1";
import Page2 from "./routes/Page2";
import Page3 from "./routes/Page3";
import "./styles.css";
export default function App() {
return (
<Routes>
<Route path="/" element={<Navigation />}>
<Route index element={<Home />} />
<Route path="page1" element={<Page1 />} />
<Route path="page2" element={<Page2 />} />
<Route path="page3" element={<Page3 />} />
</Route>
</Routes>
);
}
The whole code is available here.
Thank you for reading :)
The original article is here
Top comments (0)