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

JavaScript
1

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;
2

What kind of error message are you getting?

3

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?

4

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>
5

Open the console, you should be getting an error.

Uncaught Error: Cannot specify children on an index route

6

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.

7

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?

8

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

9

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

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.