react router

[idle pond]

Hello, I have a question, I have watched some react router tutorials and they all put the Router in the App component, but my navbar is in the Header components which is a sub in App, If I wanna make the links in the header transfere the main, how would it work?

so when someone navigates in the Header, the Main here changes

[idle pond]

and i think i messed up lmao

ill send what i did

[ornate trench]

You can see different approaches depending on the version of react router.

The latest approach is to define layouts and the page content separately so you can reuse the same page design/layout for groups of pages if needed.

You can imagine that the layout is all the shared parts of a "group" of pages, in your case it would be the header and the footer then the "dynamic" part of the page itself is the content. There is a component provided by react-router which is called outlet. The outlet component represents the content/dynamic part of the page. So you define your layout and you put the outlet component where you want your content to be presented to the users.
Using you code it would be something like this:

return (
  <>
    <Header />
    <Outlet />
    <Footer />
  </>
)

Let's imagine we have a web with the following routes:

1. /
2. /about-us
3. /contact

Each of these pages have the same design, only their content differs:

// Certain sections of the page
const Header = () => <div>Header</div>
const Footer = () => <div>Footer</div>

// The different screens
const Home = () => <div>Home page</div>
const AboutUs = () => <div>About us page</div>
const Contact = () => <div>Contact page</div>

// My main layout
const Layout = () => (
  <>
    <Header />
    <Outlet />
    <Footer />
  </>
)

Let's define your routes quickly using the latest

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about-us",
    element: <AboutUs />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

const App = () => (
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

At the moment we wouldn't be able to visit any of these pages, we would manually need to change the url from / to /about-us or /contact.
We would also not see any shared layout as we haven't used a layout route for that.
A layout route is a route that only contains the layout element for a group of pages.

Let's fix that by making a layout route:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "/about-us",
        element: <AboutUs />,
      },
      {
        path: "/contact",
        element: <Contact />,
      },
    },
  },
]);

Now this is nice, but what's happened to our Home page?

We change the home route to the Layout.
Now let's bring the home page back.
In order to do that, we need to add it as a children of the layout and mark it as an index route.
An index route indicates react router that if you visit the path defined in this route, show this component to the user.
Let's make this happen:

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: <AboutUs />,
      },
      {
        path: "/about-us",
        element: <AboutUs />,
      },
      {
        path: "/contact",
        element: <Contact />,
      },
    },
  },
]);

Alright, now we got back our home page and we share the same layout between these group of pages. 🙂

The only think left really is to update the header and use Navlink elements so we can actually navigate between each page.

[idle pond]

wdym whats happened to the home page?

the error is disappearing after less than a second on opening the site

sot his would be good?

ooo it worked

ill do a final check

[ornate trench]

Please double-check my answer above. I couldn't finish the entire message because of the max character restriction 😅

[idle pond]

I used it, and it worked

Thanks for the help, I really appreciate that

[ornate trench]

I'm glad it helped. 🙂 Happy coding!