Although everything is fine, React Router does not work

Admin 1
Viewed 101

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

react-router-dom react-router reactjs javascript
1 Answers

The Layout component is missing an Outlet for the nested Route components to be rendered in.

Outlet

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
    </>
  );
}

Edit although-everything-is-fine-react-router-does-not-work

Forked codesandbox from your project repo.

user_86908570
Related