CODEWITHSUNDEEP
reactjsreact-router
Galanthus
Galanthus

Reputation: 2270

React Router V6 - Nested subpage routes not working

I am trying to add subpages to the parent route. For some reason, I have tried to follow the documentation but it still showing the primary route component. Do I need to specify a special rule to display this subpage?

How can I solve this? Am I missing something out?

I am sharing my code file.

Thanks in advance.

This is my App.js:

import { Helmet } from "react-helmet";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import GoogleFontLoader from "react-google-font-loader";

// Styles
import GlobalStyle from "./styles/GlobalStyle";

// Pages
import NotFoundPage from "./pages/404";
import Home from "./pages/Home";
import About from "./pages/About";
import Blog from "./pages/Blog";
import Contact from "./pages/Contact";
import Dentist from "./pages/Dentist";
import Services from "./pages/Services";

// Dentist - services pages
import OralSurgery from "./pages/dentist/Oral-surgery";

// Components
import Navigation from "./components/Navigation";

const App = () => {
  const meta = {
    author: "John doe",
    themeColor: "#E6E6FA",
    description: "Stomatološka ordinacija Stoma - Gradačac",
  };

  return (
    <>
      <GoogleFontLoader
        fonts={[
          {
            font: "Roboto Slab",
            weights: [400, "400i"],
          },
        ]}
        subsets={["cyrillic-ext", "greek"]}
      />

      <GlobalStyle />

      <Helmet defaultTitle="Stoma">
        <html lang="en" />
        <meta name="author" content={meta.author} />
        <meta name="description" content={meta.description} />
        <meta name="theme-color" content={meta.themeColor} />
      </Helmet>

      <Router>
        <Navigation />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="blog/*" element={<Blog />} />
          <Route path="contact" element={<Contact />} />
          <Route path="dentist" element={<Dentist />}>
            <Route path="oral-surgery" element={<OralSurgery />} />
          </Route>
          <Route path="services" element={<Services />} />
          <Route path="/*" element={<NotFoundPage />} />
        </Routes>
      </Router>
    </>
  );
};

export default App;

Upvotes: 1

Views: 987

Answers (1)

Galanthus
Galanthus

Reputation: 2270

Nvm, You need to add to the parent component to make it work.

Upvotes: 1

Related Questions