英文:
Console error:[The above error occurred in the <Link> component:]
问题
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
英文:
---------error on console:-------------------
> index.js:1 The above error occurred in the <Link> component:
>
> at LinkWithRef (http://localhost:1234/index.3d214d75.js:27970:11)
> at div
> at Header
> at App
>
> Consider adding an error boundary to your tree to customize error
> handling behavior. Visit https://reactjs.org/link/error-boundaries to
> learn more about error boundaries.
So I am trying to load cart component of my App on click of the image of the cart which is on my Header component using react-router-dom but getting the following error on console.
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
App.js
import React from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import RestaurantMenu from "./Components/RestaurantMenu";
import Error from "./Components/Error";
import Cart from "./Components/Cart";
import store from "./Store/store";
import { Provider } from "react-redux";
export const router = createBrowserRouter([
{
path: "/",
element: <Body />,
errorElement: <Error />,
},
{
path: "/restaurant/:id",
element: <RestaurantMenu />,
errorElement: <Error />,
},
{
path: "/cart",
element: <Cart />,
errorElement: <Error />,
},
]);
function App() {
return (
<>
<RouterProvider router={router} fallbackElement={<Error />} />
<Header />
<Provider store={store}>
<Outlet />
<Footer />
</Provider>
</>
);
}
export default App;
Header.js
import React from "react";
import { Link } from "react-router-dom";
const Header = () => {
return (
<div className="flex w-[100%] items-center justify-between shadow-lg h-14 absolute left-0 top-0">
<div className="flex items-center ">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjunLTj0CdbpCMM0yRd61KuvwQyvVf8O-DKg&usqp=CAU"
alt="logo"
className="h-16 p-2 mx-2"
/>
</div>
<div>
<p className="font-bold text-xl">FOODELIVERY</p>
</div>
</div>
<div>
<ul className="flex">
<li className="text-xl px-4 cursor-pointer">Home</li>
<li className="text-xl px-4 cursor-pointer">Contact</li>
<li className="text-xl px-4 cursor-pointer">About</li>
<li className="text-xl px-4 cursor-pointer">Instamart</li>
</ul>
</div>
<Link to="/cart">
<div className="flex items-center">
<div>
<img
className="h-16 p-2"
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/Ex/2Q=="
alt="cart"
/>
</div>
<div className="mr-4">
<span className="text-2xl text-red-600 font-bold">(0)</span>
</div>
</div>
</Link>
</div>
);
};
export default Header;
Cart.js
import React from 'react'
const Cart = () => {
return (
<div className='mt-14'>Cart</div>
)
}
export default Cart
答案1
得分: 0
你没有分享实际问题或错误是什么，但根据代码，我会说这与在路由上下文之外呈现Link和Outlet组件有关。
创建一个布局路由组件来呈现Header和Outlet，以便所有内容都呈现在RouterProvider提供的路由上下文中。
示例：
import React from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import RestaurantMenu from "./Components/RestaurantMenu";
import Error from "./Components/Error";
import Cart from "./Components/Cart";
import store from "./Store/store";
import { Provider } from "react-redux";
const AppLayout = () => (
<>
<Header />
<Outlet />
<Footer />
</>
);
export const router = createBrowserRouter([
{
element: <AppLayout />,
children: [
{
path: "/",
element: <Body />,
errorElement: <Error />,
},
{
path: "/restaurant/:id",
element: <RestaurantMenu />,
errorElement: <Error />,
},
{
path: "/cart",
element: <Cart />,
errorElement: <Error />,
},
]
},
]);
function App() {
return (
<Provider store={store}>
<RouterProvider router={router} fallbackElement={<Error />} />
</Provider>
);
}
export default App;
英文:
You didn't share what the actual issue or error is/was, but based on the code I'll say it's something to do with rendering Link and Outlet components outside a routing context.
Create a layout route component to render the Header and Outlet so that all content is rendered into the routing context the RouterProvider provides.
Example:
import React from "react";
import Header from "./Components/Header";
import Body from "./Components/Body";
import Footer from "./Components/Footer";
import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
import RestaurantMenu from "./Components/RestaurantMenu";
import Error from "./Components/Error";
import Cart from "./Components/Cart";
import store from "./Store/store";
import { Provider } from "react-redux";
const AppLayout = () => (
<>
<Header />
<Outlet />
<Footer />
</>
);
export const router = createBrowserRouter([
{
element: <AppLayout />,
children: [
{
path: "/",
element: <Body />,
errorElement: <Error />,
},
{
path: "/restaurant/:id",
element: <RestaurantMenu />,
errorElement: <Error />,
},
{
path: "/cart",
element: <Cart />,
errorElement: <Error />,
},
]
},
]);
function App() {
return (
<Provider store={store}>
<RouterProvider router={router} fallbackElement={<Error />} />
</Provider>
);
}
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论