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

Error in React when add Link from react-router-dom – Reactjs

I’m developing a simple app in React, and I have an error adding the Link component from the react-router-dom package. The component that contains the routes is App.js, which is composed as follows:

enter image description here

In the <Header /> component, is grafted <MenuNavigation /> composed as follows:

enter image description here

This is where the error occurs:

enter image description here

Tags:

2

Answers


  1. 0

    Try setting your router like this and remove the trailing / from the paths;

    const routes = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
   children: [
     {
    path: "secondpage",
    element: <SecondPage />,
    },
     {
    path: "fai-da-te",
    element: <FaiDaTe />,
    }
    ]
  },
]);
    Login or Signup to reply.
  2. 0

    You are rendering the Link component outside any routing context, i.e. the RouterProvider component.

    Create a layout route component that renders Header and Footer, and an Outlet for the nested children routes.

    Example:

    import {
  createBrowserRouter,
  RouterProvider,
  Outlet,
} from 'react-router-dom';

const AppLayout = () => (
  <div className="App">
    <Header />
    <Outlet />
    <Footer />
  </div>
);

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <HomePage />,
      },
      {
        path: "/ai-da-te",
        element: <FaiDeTe />,
      },
      {
        path: "/approfondimenti",
        element: <Approfondimenti />,
      },
    ],
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search