Can't use react router element

Question

I am gonna create react router structure in my React JS app. I have an issue. The issue is I can't use react-router element. So I have a component Main Page. I want to display after page is loaded. Also, I have nav component I want display it all the time. But I can see only nav component. Main Page component is found. I don't have any errors, but I can't see it. I can't see its content.

Index js file. Main file in my app

import React from 'react';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import MainPage from "./components/MainPage";
import ReactDOM from 'react-dom/client';
import Nav from "./components/Nav";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Nav />,
    children: [
      {
        path: "mainpage/",
        element: <MainPage />,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Nav component:

import React from 'react';
import { Link } from "react-router-dom";

function Nav(props) {
  return (
    <header className="header">
      <div className="header-container">
        <nav className="header-nav">
          <ul className="nav-list">
            <li>
              <Link to={`mainpage/`}>Home</Link>
            </li>
            <li>
              <Link to={`News/`}>News</Link>
            </li>
            <li>
              <Link to={`About/`}>About</Link>
            </li>
            <li>
              <Link to={`Contacts`}>Contacts</Link>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

export default Nav;

Main page component:

import React from 'react';

function MainPage(props) {
  console.log('hi')

  return (
    <div>
      <div className="hello">
        hello world
      </div>
    </div>
  );
}

export default MainPage;

I've read the entire page of the react-router for beginners documentation, but I still can't solve this issue. I've tried all that I could.

Answer 1

You should check how Nested routes works :)

So in your case, you're just rendering your Nav component, because you've not defined the "placeholder" (<Outlet>) for your route children.

Your structure must be something like

const router = createBrowserRouter([
    {
        path: "/",
        element: <Layout />,
        children: [
            {
                path: "mainpage/",
                element: <MainPage />,
            },
        ],
    },
]);

// Layout.jsx
import { Outlet } from 'react-router-dom';
import Nav from "./components/Nav";

const Layout = () => {
    return (<>
        <Nav />
        <Outlet />
    </>)
}