Is it compulsory to use <Route> only inside of App.js? throwing error like "Error: Invariant failed: You should not use <Link> outside a <Router>"

Question

是否必须在App.js中使用react-router?

我正在尝试在我的应用程序中使用 React 路由器，但遇到了问题。

我有一个名为 ProductList.jsx 的组件。在该组件中，我想定义 Cart.jsx 组件的路径，使用 .我绝对想在 ProductList.jsx 中定义 Cart.jsx 的路径，因为它确实从 ProductList.jsx.

中获取了一些道具

当我尝试定义路径时，它会抛出类似“错误：不变量失败：您不应在 <Router> 之外使用 <Link>”的错误“=15=]

包括下面的代码

App.jsx

import Home from "./pages/Home";

const App = () => {
  
  return (
  <>
        <Home />
        </>
  )
};
export default App

Home.jsx

const Home = () => {
  return (
 
    <div>
      
      <Navbar />
      <Slider/>
      <Categories/> 
      <PopularProducts/>
      <ProductList/>
      <Footer/>
      
    </div>
  
  );
};

ProductList.jsx

const ProductList = () => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState({});
  const [order, setOrder] = useState({});
  const [errorMessage, setErrorMessage] = useState('');

  const fetchProducts = async () => {
    const { data } = await commerce.products.list();

    setProducts(data);
  };

  const fetchCart = async () => {
    setCart(await commerce.cart.retrieve());
  };

  const handleAddToCart = async (productId, quantity) => {
    const item = await commerce.cart.add(productId, quantity);

    setCart(item.cart);
  };

  const handleUpdateCartQty = async (lineItemId, quantity) => {
    const response = await commerce.cart.update(lineItemId, { quantity });

    setCart(response.cart);
  };

  const handleRemoveFromCart = async (lineItemId) => {
    const response = await commerce.cart.remove(lineItemId);

    setCart(response.cart);
  };

  const handleEmptyCart = async () => {
    const response = await commerce.cart.empty();

    setCart(response.cart);
  };

  const refreshCart = async () => {
    const newCart = await commerce.cart.refresh();

    setCart(newCart);
  };

  const handleCaptureCheckout = async (checkoutTokenId, newOrder) => {
    try {
      const incomingOrder = await commerce.checkout.capture(checkoutTokenId, newOrder);

      setOrder(incomingOrder);

      refreshCart();
    } catch (error) {
      setErrorMessage(error.data.error.message);
    }
  };

  useEffect(() => {
    fetchProducts();
    fetchCart();
  }, []);

  const handleDrawerToggle = () => setMobileOpen(!mobileOpen);
  const user= ''


  return (
    <Container>
      <Navbar />
      <Router>
      <div style={{ display: 'flex' }}>
        <CssBaseline />
        
        <Switch>
        
      <Route path="/login" >
        {user ? <Redirect to="/"/> :  <Login/> }
      </Route>
      <Route path="/register" >
        <Register />
      </Route>
          <Route path="/products">
            <Products products={products} onAddToCart={handleAddToCart} handleUpdateCartQty />
            <Footer/>
          </Route>
          <Route exact path="/cart">
            <Cart cart={cart} onUpdateCartQty={handleUpdateCartQty} onRemoveFromCart={handleRemoveFromCart} onEmptyCart={handleEmptyCart} />
          </Route>
          <Route path="/checkout">
            <Checkout cart={cart} order={order} onCaptureCheckout={handleCaptureCheckout} error={errorMessage} />
          </Route>
        </Switch>
      </div>
    </Router>
    <Cart cart={cart} onUpdateCartQty={handleUpdateCartQty} onRemoveFromCart={handleRemoveFromCart} onEmptyCart={handleEmptyCart} />
      <Footer/>
    </Container>
  );
};

export default ProductList;

Answer 1

"Error: Invariant failed: You should not use <Link> outside a <Router>"

必须在内渲染所有Link、Switch和Route组件路由上下文。从您的代码片段中，我没有看到 Router 渲染到 ProductList 组件中。我怀疑“link outside a router”问题是由于您的 Navbar 组件位于 Router 组件之外。

移动 Router 以包装整个应用程序。删除所有其他无关的路由器（如果有）。您只需要一个路由器即可为整个应用程序提供路由上下文。

import { BrowserRouter as Router } from 'react-router-dom'; const App = () => { return ( <Router> <Home /> </Router> ) };

...

const ProductList = () => { ... return ( <Container> <Navbar /> <div style={{ display: 'flex' }}> <CssBaseline /> <Switch> ... routes ... </Switch> </div> ... </Container> ); };

Is it compulsory to use <Route> only inside of App.js? throwing error like "Error: Invariant failed: You should not use <Link> outside a <Router>"

Is it compulsory to use <Route> only inside of App.js? throwing error like "Error: Invariant failed: You should not use <Link> outside a <Router>"

javascript

reactjs

react-router

react-router-dom