Why am I directed to the same page when using routes in react js-CodePudding

So in my app.js i created Router-Routes-Route tags to direct me to a blank page after clicking on a button that would take me to the link. but it doesn't seem like its working and instead its taking me to the same exact page with a new link that am directed to. also when I write any text it is written on the top of the page after clicking on the button.

Here is my code

App.js Class:-

import "./App.css";
import React from "react";
import Navbar from "./Component/Navbar";
import Sidebar from "./Component/Navbar";
import HeaderBox from "./Component/HeaderBox";
import AMBox from "./Component/AMBox";
import "bootstrap/dist/css/bootstrap.min.css";
import Experience from "./Component/Experience";
import Education from "./Component/Education";
import Projects from "./Component/Projects";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Memory from "./Component/Memory/Memory";
import About from "./About";
// import { Card } from "react-bootstrap";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/Memory" element={<Memory />}></Route>
      </Routes>
      <Navbar />
      <AMBox></AMBox>
      <Experience></Experience>
      <Projects></Projects>
      <Education></Education>
    </Router>
  );
};
 




export default App;```

This is the way I linked  the memory to get me the link
 
 <NavLinks to="Memory">
            <svg
              
              viewBox="45 60 400 320"
              xmlns="http://www.w3.org/2000/svg"
            >
         
              <mask id="knockout-text">
                <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
                <text x="147" y="227" fill="#000">
                  Memory
                </text>
              </mask>
            </svg>
          </NavLinks>

export const NavItem = styled.li`
  height: 80px;
`;

export const NavLinks = styled(LinkS)`
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  padding: 0 1rem;
  margin-right: 20px;
  height: 100%;
  cursor: Pointer;

  &.active {
    border-bottom: 3px solid #01bf71;
  }
  @media screen and (max-width: 960px) {
    margin-right: 4px;
  }
`;

The Memory class

import React from "react";

const Memory = () => {
  return <div>Memory Page</div>;
};

export default Memory;

Before and after clicking on the memory button

I tried doing this but i got an error saying ''Error: useHref() may be used only in the context of a component.''

    <>
    <Router>
      <Routes>
        <Route path="/Memory" element={<Memory />}></Route>
      </Routes>
      </Router>
      <Navbar />
      <AMBox></AMBox>
      <Experience></Experience>
      <Projects></Projects>
      <Education></Education>
      </>

Thank you

CodePudding user response：

From what I've gathered you want a "home page" to be rendered on it's own route, along with Memory on its "/memory" route. Move AMBox, Experience, Projects, and Education into their own route, and render all the routes below the Navbar so they render below it in the page.

Example:

const App = () => {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/memory" element={<Memory />} />
        <Route
          path="/"
          element={(
            <>
              <AMBox />
              <Experience />
              <Projects />
              <Education />
            </>
          )}
        />
      </Routes>
    </Router>
  );
};

CodePudding user response：

const App = () => {
  return (
    <Router>
      <Routes>
        <Route exact path="/">
          <Home/>
        </Route>
        <Route exact path="/memory" >
          <Mem/>
        </Route>
      </Routes>
    </Router>
  );
};

function Home(){
      <Navbar />
      <AMBox></AMBox>
      <Experience></Experience>
      <Projects></Projects>
      <Education></Education>
}

function Mem(){
      <Memory />
}

Do make modifications to fit your case