Wątek przeniesiony 2023-09-27 10:45 z JavaScript przez Riddle.

Link poza komponentem RouterProvider

0

Witam,
mam kod strony, który ma renderować odpowiednią podstronę w zależności od ścieżki URL Jednak chciałbym zrobić, żeby zawsze, niezależnie od ścieżki wyświetlany był Navbar. Jednak kiedy dodam Navbar w taki sposób, jak na dole - pojawiają się błędy.

function App() {
	const router = createBrowserRouter([
		{
			path: '/',
			element: <Home />,
		},
		{
			path: '/page/*',
			element: <Page />,
		},
	]);

	return (
		<div className="App">
			<Navbar />
			<RouterProvider router={router} />
		</div>
	);
}

export default App;

Kod Navbar.js

export default function Navbar() {
	return (
		<div className="navbar">
			<Link to="/">Home</Link>
		</div>
	);
}
Błąd: The above error occurred in the <Link> component:
    at LinkWithRef (http://localhost:3000/static/js/bundle.js:38358:7)
    at div
    at Navbar
    at div
    at App

Kiedy zakomentuję lnijkę <Link to="/">Home</Link>, błąd znika.

0

W repozytorium biblioteki znalazłem taki przykład

https://github.com/remix-run/react-router/blob/dev/examples/data-router/src/app.tsx

import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
// ...

const router = createBrowserRouter([
  {
    path: "/",
    Component: Layout,
    children: [
      {
        index: true,
        Component: HomePage,
      },
      {
        path: 'about-us',
        Component: AboutUsPage
      },
    ],
  }
]);

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

function Layout() {
  return (
   <div className="layout">
     <Navbar />

     <Outlet />
   </div>
 );
}

function HomePage() {
  return <h1>Hello</h1>;
}

function AboutUsPage() {
  return <h1>Hi</h1>;
}

Tylko musisz dodatkowo zaimportować komponent <Outlet />

https://reactrouter.com/en/main/components/outlet

0

Musisz dodać komponent navbar poza routerem.

function App() {
  return (
    <div className="App">


      <NavBar />
  
      <Routes>
        <Route path="/" element={<ReviewList/>} />
        <Route path="/:category" element={<ReviewList/>} />
        <Route path="/reviewPage/:review_id" element={<ReviewPage/>} />
        <Route path="*" element={<ErrorPage />} />
      </Routes>

    </div>
  );
}

export default App;
3

Pusta treść błędu nie ma sensu, ale sam błąd już zapewne ma. W Navbar nie ma routingu, więc skąd tam jakiś Link?

Rozwiązanie u konkurencji :) https://stackoverflow.com/a/74429261/3110289

1 użytkowników online, w tym zalogowanych: 0, gości: 1