I have a problem with the router V6. The routes are not being rendered. The homepage use to have all the products and now I cannot see any of the products shown, also I have my code to the links that go to every part of the website but is not appearing. The error that appears is:

react_devtools_backend.js:4045 No routes matched location "/rewards-store-andrea-lopez-bravo"  
    at Routes (http://localhost:3000/rewards-store-andrea-lopez-bravo/static/js/vendors~main.chunk.js:32538:5)
    at Router
    at div
    at App (http://localhost:3000/rewards-store-andrea-lopez-bravo/static/js/main.chunk.js:423:63)
    at Router (http://localhost:3000/rewards-store-andrea-lopez-bravo/static/js/vendors~main.chunk.js:32471:15)
    at BrowserRouter (http://localhost:3000/rewards-store-andrea-lopez-bravo/static/js/vendors~main.chunk.js:31958:5)
    at AppProvider (http://localhost:3000/rewards-store-andrea-lopez-bravo/static/js/main.chunk.js:4188:5)

index.tsx:25 No routes matched location "/rewards-store" 

This my router:

import { Routes, Route } from "react-router-dom";
import { Home } from "../pages/Home";
import { History } from "../pages/History";
import { Points } from "../pages/Points";
import { NotFound } from "../components/notification/NotFound";

 
 export const Router  = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/history" element={<History/>}/>
      <Route path="points" element={<Points/>}/>
      <Route path="NotFound" element={<NotFound/>} />
    </Routes>
  );
};

This is index:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import AppProvider from "./context/AppContext";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <AppProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AppProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

AppContext:

import React,{ useState } from "react";
 import { usePagination } from "../components/utils/pagination.jsx";


export const AppContext = React.createContext();


export default function AppProvider({ children }) {
    const [user,setUser] = useState({})
    const [points, setPoints] = useState(0)
    const [products, setProducts] = useState([])
    const [reedemStatus, setReedemStatus] = useState({})
    const [history, setHistory] = useState([])

    const paginationList = usePagination(products, 16)
    const paginationHistoryList = usePagination(history, 16)

    const totalProducts = products.length
    const totalHistory = history.length

    const handlerAddPoint =(value)=>{
        const newUser = {...user}
        newUser.points = user.points   value
        setUser(newUser)
      }
    
      const handlerSubtractPoint =(points)=>{
        const newUser = {...user}
        newUser.points = user.points - points
        setUser(newUser)
      }
    return(
        <AppContext.Provider value={{user,
            setUser,  
            handlerAddPoint, 
            handlerSubtractPoint, 
            points,
            setPoints,  
            products, 
            setProducts, 
            totalProducts,
            paginationList,
            reedemStatus, 
            setReedemStatus,
            history,
             setHistory, 
             paginationHistoryList,
             totalHistory}}>
             {children}
        </AppContext.Provider>
    );
}

App.js

import React, { useEffect, useContext } from "react";
import "./App.css";
import { Header } from "./components/header/Header";
import { Nav } from "./components/nav/Nav.jsx";
import { getUser } from "./services/users";
import { AppContext } from "./context/AppContext";
import { Notification } from "./components/notification/Notification";
import { Router } from "./routers/Router";

function App() {
  const { setUser } = useContext(AppContext);
  useEffect(() => {
    getUser().then((user) => {
      setUser(user);
    });
  }, [setUser]);
  return (
    <div className="App">
      <Notification />
      <Nav />
      <Header />
      <Router />
    </div>
  );
}

export default App;

In the menu.jsx the links are not rendering:

import "./Menu.css";
import React from "react";
import { Link } from "react-router-dom";

export const Menu =()=>{
    return(
        <ul className="menu flex-row">
             <li className="pink-line"><Link className="normal-text" to="/acamica-rewards-store/">Home</Link></li>
             <li className="pink-line"><Link className="normal-text" to="/acamica-rewards-store/points">Add points</Link></li>
             <li className="pink-line"><Link className="normal-text" to="/acamica-rewards-store/history">History</Link></li>
         </ul>
    )
 }

CodePudding user response：

In your router always put the home route at the very bottom!

<Routes>
      <Route path="/history" element={<History/>}/>
      <Route path="points" element={<Points/>}/>
      <Route path="NotFound" element={<NotFound/>} />
      <Route path="/" element={<Home />} />
</Routes>

or make sure to make the home path as exact!

<Routes>
      <Route exact path="/" element={<Home />} />
      <Route path="/history" element={<History/>}/>
      <Route path="points" element={<Points/>}/>
      <Route path="NotFound" element={<NotFound/>} />
</Routes>