I want to link pages using React Reuters but As far as I know everything is fine but none of the components are working properly
َApp.js
import React from "react";
import MatherComponent from "./components/MatherComponent";
import AboutMe from "./components/AboutMe";
import NoPage from "./components/NoPage";
import Layout from "./components/Layout";
import { BrowserRouter, Route , Routes } from "react-router-dom";
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<MatherComponent />} />
<Route path="about" element={<AboutMe />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Layout
import React from "react";
import { Link } from "react-router-dom";
function Layout() {
return (
<>
<header className="row" style={{ padding: "10px", backgroundColor: '#ffc107', display: 'flex', marginLeft: "0px", marginRight: "0px" }}>
<div style={{ display: 'flex' }} className="col col-4">
<img src="https://img.icons8.com/doodle/48/000000/apple-weather.png" alt="" />
<div style={{ marginRight: "10px", paddingTop: "10px" }}>آب و هوای امروز</div>
</div>
<div className="col col-4">
<button style={{ float: "left" }} className="btn">
<img alt="" src="https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-thermometer-weather-those-icons-lineal-color-those-icons.png" />
</button>
</div>
<div className="col col-4">
<Link to="/about">About Me</Link>
</div>
</header>
</>
);
}
export default Layout;
That is, it only shows the layout and does not show the other components
The Layout component is missing an Outlet for the nested Route components to be rendered in.
An
<Outlet>should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.
import { Link, Outlet } from "react-router-dom";
function Layout() {
return (
<>
<header className="row" style={{ padding: "10px", backgroundColor: '#ffc107', display: 'flex', marginLeft: "0px", marginRight: "0px" }}>
<div style={{ display: 'flex' }} className="col col-4">
<img src="https://img.icons8.com/doodle/48/000000/apple-weather.png" alt="" />
<div style={{ marginRight: "10px", paddingTop: "10px" }}>آب و هوای امروز</div>
</div>
<div className="col col-4">
<button style={{ float: "left" }} className="btn">
<img alt="" src="https://img.icons8.com/external-those-icons-lineal-color-those-icons/48/000000/external-thermometer-weather-those-icons-lineal-color-those-icons.png" />
</button>
</div>
<div className="col col-4">
<Link to="/about">About Me</Link>
</div>
</header>
<Outlet /> // <-- nested routes render here
</>
);
}