Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

282
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda