react-router-dom@6.4.1 not rendering components and also not logging any errors

Viewed 52

react-router-dom@6.4.1 is not rendering components.

I haven't coded React in a while now. I am trying to utilize react-router but something seems to be wrong. There's no error emitted but the components won't render. So many updates to react-router, it tough to keep up with.

Preview

Link to github repo

This is a sample of my root file.

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import './index.css';
import {
  createBrowserRouter,
  RouterProvider,
  Route,
} from "react-router-dom";
import { Calendar, Message, Settings, Team } from './components';
import ErrorPage from "./error-page";
import Aside from './root';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Aside />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/messages",
        element: <Message />
      },
      {
        path: "/team-members",
        element: <Team />
      },
      {
        path: "/calendar",
        element: <Calendar />
      },
      {
        path: "/settings",
        element: <Settings />
      }
    ]
  }
]);

const container = document.getElementById('root')!;
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  </React.StrictMode>
);
1 Answers
Related