如何使用<Link to...>打开页面而不重新加载整个页面

Question

我以前能成功地做到这一点，但现在已经不起作用了。下面是codeSandbox：https://codesandbox.io/s/gallant-cherry-r77lv?file=/src/App.js:0-1279

我正在使用https://ibaslogic.com/routing-with-react-router/构建一个用于学习的示例站点

主要问题是App.js。它在页面上有两个链接，点击后不应该转到新页面，而应该打开SinglePage.js中的一个部分。相反，我点击链接，我被带到一个新的空白页。

我有一个名为App.js的主页，其中有两个链接

import React from "react";
import { Link, Route, Routes } from "react-router-dom"
import SinglePage from "./pages/SinglePage"

//stylesheet
import "./pages/TempApp.css";

import Header from "./components/header";
import {
  ChakraProvider,
  // Box,
  // Text,
  // VStack,
  // Code,
  // Grid,
  theme
} from "@chakra-ui/react";
// import { ColorModeSwitcher } from '../ColorModeSwitcher';

function App() {
  return (
    <ChakraProvider theme={theme}>
      <Header />
      <div className="about__content">
  
  <ul className="about__list">
    <li>
      <Link to="about-app">About App</Link>
    </li>
    <li>
      <Link to="about-author">About Author</Link>
    </li>
  </ul>

  <Routes>
  <Route path=":slug" element={<SinglePage />}/>
  </Routes>
</div>
    </ChakraProvider>
  );
}

export default App;

此页面有两个链接：about app和about author。我希望能够单击一个链接，而不需要重新复制整个页面，只需扩展SinglePage.js的"about app“部分即可。

下面是SinglePage.js

import React from "react";
import { useParams } from "react-router-dom";

const SinglePage = () => {
  const aboutData = [
    {
      slug: "about-app",
      title: "About the App",
      description:
        "ABOUT APP: Blah ABOUT APP: Blah ABOUT APP: Blah ABOUT APP: Blah ABOUT APP: BlahABOUT APP: Blah ABOUT APP: Blah ABOUT APP: Blah ABOUT APP: Blah ABOUT APP: Blah",
    },
    {
      slug: "about-author",
      title: "About the Author",
      description:
        "ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah ABOUT - AUTHOR blah",
    },
  ];

  const { slug } = useParams();
  const aboutContent = aboutData.find((item) => item.slug === slug);
  const { title, description } = aboutContent;

  return (
    <div className="main__content">
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
};
export default SinglePage;

非常感谢

Answer 1

如果您只想在当前页面中显示另一个组件，则需要使用条件呈现。

它的工作方式示例：https://codesandbox.io/s/conditional-rendering-6tg9o