1

I have made a webpage with react router v6, apparently the routes are ok, but when I render my page in github for a second time , it gives a 404. That doesn't happen when I use my localhost. I was told to use BrowserRouter or Hashrouter but it gives an error

bundle.js:47865 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

So, I decided to leave it like this that works ok, but not properly in github

import React, { useState } from "react";
import Homepage from "./pages/homepage/Homepage";
import Slider from "./components/slider/Slider";
import Header from "./components/nav/Nav";
import Products from "./pages/product/Product";
import ScrollToTop from "./components/ScrollToTop";
import CheckOut from "./pages/checkout/Checkout";
import HorizontalLinearStepper from "./pages/stepper/Stepper";
import { Routes, Route } from "react-router-dom";
import {
  CartContext,
  CounterContext,
  TotalContext,
  ShippingContext,
} from "./context/AppContext";

function App() {
  let count = useState(0); // Number of items added into cart
  let [cart, setCart] = useState([]); // Array to store the items
  let [total, setTotal] = useState([]);
  let [shippingDetails, setShippingDetails] = useState({});
  console.log("cart", cart);

  return (
    <CartContext.Provider value={[cart, setCart]}>
      <TotalContext.Provider value={[total, setTotal]}>
        <CounterContext.Provider value={count}>
          <ShippingContext.Provider
            value={[shippingDetails, setShippingDetails]}
          >
            <div>
              <Header />
              <Slider />
              <ScrollToTop />
              <Routes>
                <Route path="/" element={<Homepage />} />
                <Route path="/products" element={<Products />} />
                <Route path="/checkout" element={<CheckOut />} />
                <Route path="/payment" element={<HorizontalLinearStepper />} />
              </Routes>
            </div>
          </ShippingContext.Provider>
        </CounterContext.Provider>
      </TotalContext.Provider>
    </CartContext.Provider>
  );
}

Can anybody understand what is happening? Thanks a lot!

Andrea Lopez Bravo
  • 155
  • 2
  • 2
  • 11
  • Error is clear, says you are rendering a router within another router. You only need one router for your entire app. – Drew Reese Jan 18 '22 at 23:12
  • 1
    Does this answer your question? [React-router urls don't work when refreshing or writing manually](https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writing-manually) – Wakka Jan 18 '22 at 23:12
  • Yes, that's why I didn't leave BrowserRouter or HashRouter, without them the error of the router dissapears but not the 404 error of github – Andrea Lopez Bravo Jan 18 '22 at 23:15
  • You may need to set the homepage in your package.json, add a `basename` prop for the subdirectory your app is running in on the server, or add a server config to redirect nested app pages to the directory were the app is running... or a combination of these. I think for github you just need to pay attention to the first two. https://create-react-app.dev/docs/deployment/#building-for-relative-paths – Drew Reese Jan 18 '22 at 23:57
  • I have done that. I finally change in my routes to . Github don't process routes properly with browserRoter.That funcntions for me. https://stackoverflow.com/questions/51974369/what-is-the-difference-between-hashrouter-and-browserrouter-in-react – Andrea Lopez Bravo Jan 19 '22 at 20:04

0 Answers0