createBrowserRouter How to nest child routes inside another route that itself is a nested child route?

I am new to react router I followed the tutorial for the latest version 6.4.3 and am using the createBrowserRouter.

For my App component below I attempted to add a children object to the index path but when I do this the app doesn’t render all of a sudden. I have tried this on the other paths having the same results. Not exactly sure what to do please help!

App.js Code below:

import logo from './logo.svg';
import './App.css';
import './index.css';

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/Root';
import Home from './routes/Home';
import Projects from './routes/Projects';
import ErrorPage from './error/ErrorPage';
import Contact from './routes/Contact';
import Certificates from './routes/Certificates';
import Skills from './routes/Skills';
import Cycling from './routes/HobbyRoutes/Cycling';
import Minis from './routes/HobbyRoutes/Minis';
import Chivalry from './routes/HobbyRoutes/Chivalry';
//import NavBar from '../src/NavBar/NavBar';

const router = createBrowserRouter([
    {
        path: '/',
        element: <Root />,
        errorElement: <ErrorPage />,
        children: [
            {
                index: true,
                element: <Home />,
                children: [
                    {
                        path: '/home/minis',
                        element: <Minis/>
                    }
                ]
            },
            {
                path: '/projects',
                element: <Projects />,
                errorElement: <ErrorPage />,
            },
            {
                path: '/certificates',
                element: <Certificates />,
            },
            {
                path: '/skills',
                element: <Skills />,
            },
            {
                path: '/contact',
                element: <Contact />,
            },
        ],
    },
]);


function App() {
  return <RouterProvider router={router} />;
}

export default App;

What kind of error message are you getting?

Im not getting an error message, the app isnt rendering. However i suspect that whenever I nest child paths on the root ‘/’ path nothing is rendering which makes me think the router might be confused about the route maybe.

ive been trying to Google this but I cant seem to find anything on this.

What do you think?

Did you ever resolve it? I am using a different react router setup that is quite straightforward and works fine:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

<Router>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/fetch" element={<Fetch />} />
          <Route exact path="/create" element={<Create />} />
          <Route exact path="/login" element={<Login />} />
          <Route exact path="/success" element={<Success />} />
        </Routes>
      </Router>

Open the console, you should be getting an error.

Uncaught Error: Cannot specify children on an index route

Yeah, I got that error, I resolved that issue by making home page have the same route as root but now i have anew issue where active link doesnt work for root.

Not sure what you mean by this? Does the links not work or is it styling for active links?

Are you using the <NavLink> component?

Yeah the nav link styling isnt working anymore and yes I am using NavLink components.

Add a live version on Stackblitz so we can see your code or a GtiHub repo, otherwise, we really can’t help.