Question 214991 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – What is the best way to define routes?

I want to define my routes like below but at path "/" of the app, my Home component doesn’t mount.

function App() {
  const router = createBrowserRouter([
    {
      element: <RootLayout />,
      errorElement: <ErrorPage />,
      children: [
        {
          path: "/",
          element: <Home />,
        },
      ],
    },
  ]);

  const theme = createTheme({
    direction: "rtl",
    typography: {
      fontFamily: "IRANYekanX",
    },
  });

  return (
    <>
      <ThemeProvider theme={theme}>
        <RouterProvider router={router} />
      </ThemeProvider>
    </>
  );
}

export default App;

I tried other paths with other components but it seems that I can’t see any children in my RootLayout.

Tags:

2

Answers


  1. 0

    I think that you have to change your code as:

      const router = createBrowserRouter([
    {
      path: "/",
      element: <RootLayout />,
      errorElement: <ErrorPage />,
      children: [
        {
          path: "" //this line of code is optional
          element: <Home />,
        },
      ],
    },
  ]);

    The best way of defining the ReactProvider can be taken by reading the docs of react-router https://reactrouter.com/en/main/routers/router-provider.

    Login or Signup to reply.
  2. 0

    The RootLayout component must render an Outlet component for nested routes, e.g. nested children routes, to be matched and render their content to the DOM.

    Example:

    import { Outlet } from 'react-router-dom';

const RootLayout = () => {
  ...

  return (
    ...
    <Outlet /> // <-- nested routes/children routes render content here
    ...
  );
};

    const router = createBrowserRouter([
  {
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: "/",
        element: <Home />, // <-- rendered into parent route's Outlet
      },
    ],
  },
]);

    See Layout Routes and Outlets for more details.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search