为什么我在 react js 中使用路由时被定向到同一页面

Question

因此，在我的 app.js 中，我创建了 Router-Routes-Route 标签，以便在单击将我带到 link 的按钮后将我引导至空白页面。但它似乎不起作用，而是将我带到了同一个页面，其中包含指向的新 link。同样，当我写任何文本时，它会在单击按钮后写在页面顶部。

这是我的代码

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
              class="myClass1"
              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;
  }
`;

记忆class

import React from "react";

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

export default Memory;

点击记忆按钮前后

我试过这样做，但我收到一条错误消息“'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>
      </>

谢谢

Answer 1

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

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

function Mem(){
      return (<Memory />)
}

请根据您的情况进行修改

Answer 2

根据我收集到的信息，您希望“主页”在其自己的路线上呈现，同时 Memory 在其 "/memory" 路线上呈现。将AMBox、Experience、Projects、Education移动到自己的路由中，渲染下方的所有路由 ] Navbar 以便它们在页面中呈现在其下方。

示例：

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

为什么我在 react js 中使用路由时被定向到同一页面

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

web-applications

reactjs

react-router

react-router-dom