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

【问题标题】：React how to use <Link to...> to open a page without reloading entire page反应如何使用 <Link to...> 打开页面而不重新加载整个页面
【发布时间】：2022-01-25 14:10:49
【问题描述】：

我以前可以在 React 中成功执行此操作，但现在无法正常工作。这是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的“关于应用程序”部分

下面是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;

非常感谢

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案1】：

如果只想在当前页面内显示另一个组件，则需要使用条件渲染。

工作原理示例： https://codesandbox.io/s/conditional-rendering-6tg9o

【讨论】：