Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

279
Views
Although everything is fine, React Router does not work

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

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!