Nested Route not Rendering React Router v6

Question

I am trying to nest a path within another path in react-router-dom version 6 and whenever I try to visit the nested argument's page (/blog/1), it displays a blank non-styles HTML page but when I put a child path to the root ex. /blog it renders perfectly fine.

Example router layout with nested argument:

import React from "React";
import { BrowserRouter, Routes, Route } from "react-router-dom"

import Main from "./pages/Main.tsx";
import ChatGPT from "./pages/ChatGPT.tsx";

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route index element={<Main />} />

                <Route path="blog">
                    <Route path=":id" element={<Blog />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
};

Main.tsx:

import React from "react";

const Main = () => {
    return (
        <div>
            <p>Home page</p>
        </div>
    );
};

export default Main;

Blog.tsx

import React from "react";
import { useParams } from "react-router-dom";

const Blog = () => {
    const params = useParams();
    const id = params.id;

    return (
        <div>
            <p>Blog ID: {id}</p>
        </div>
    );
};

export default Blog;

I tried to put the <Outlet /> tag into the root of my component's <div> tag that didn't work & I was expecting the react to render the nested argument's page correctly. I am also using Webpack's dev server to view the pages.

React: v18.2.0 | React Router DOM: v6.6.2 | Webpack: v5.75.0 | Webpack-cli: v5.0.1 | Webpack-dev-server: 4.11.1

I don't see any issue with the router and routes. What are `Main.default` and `ChatGPT.default`? These don't appear to be valid React components. What are you trying to render? Can you [edit] the post to include a more complete and comprehensive [mcve] for all relevant code you are working with and trying to use? — Drew Reese, Jan 25 '23 at 01:44

score 0 · Answer 1 · answered Jan 25 '23 at 02:11

0

Main and Blog are default exports, which means they are default imports. Calling Main.default or Blog.default is likely returning undefined. Just Render <Main /> and <Blog />.

import React from "React";
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Main from "./pages/Main";
import Blog from "./pages/Blog";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Main />} />
        <Route path="blog">
          <Route path=":id" element={<Blog />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

answered Jan 25 '23 at 02:11

Drew Reese

165,259
14
153
181

I removed the ".default" calls from all of them but that still doesn't resolve the issue. The page still shows as a blank HTML page. – Ryan V Jan 25 '23 at 02:20
@RyanV I see no overt issues in the code you've shared. Could you create a *running* [codesandbox](https://codesandbox.io/) demo that reproduces the issue you see that we could inspect live? – Drew Reese Jan 25 '23 at 02:22
@RyanV FWIW I'm unable to reproduce any issue you describe in this running [sandbox](https://codesandbox.io/s/nested-route-not-rendering-react-router-v6-lltk7n). Feel free to fork it and see if you can reproduce the issue that we could then take a look at. – Drew Reese Jan 25 '23 at 02:28
Maybe It's an issue with Webpack's dev server? – Ryan V Jan 25 '23 at 02:48
@RyanV Perhaps. Can you add your webpack config to your post? – Drew Reese Jan 25 '23 at 03:30

Nested Route not Rendering React Router v6

1 Answers1