Javascript React链接和React路由：试图清除页面，但却发生了追加？很奇怪

我正在建立一个非常基本的博客网站，我有一个部分，我在一个主要的博客页面上。还有一个按钮可以使用

和

转到特定的博客文章。但是，当单击它时，它会将特定博客文章中的信息附加到主博客页面，而不是清除页面，然后进入特定博客文章信息。我真的很困惑，我真的需要帮助。我附上了我的代码和截图

博客主页

import React from 'react';
import './Blog.css';

import { BrowserRouter , Route, Link, Switch, NavLink } from 'react-router-dom';

import TestPage from './TestBlog.js';


function Blog() {
    return (
     <BrowserRouter>
        <div>
            <header>
                <h1> Blog </h1>

                <div class="card">
                  <div class="container">
                    <h4><b> Date 2020 - Date 2020 (My experience)</b></h4> 

                    <NavLink to="/testpage">
                        <button type="button">
                            Read More
                        </button>
                    </NavLink>
                  </div>
                </div>
            <Route path = "/testpage" component = {TestPage} />

            </header>
        </div>
     </BrowserRouter>
    )
}

从“React”导入React；
导入“/Blog.css”；
从“react router dom”导入{BrowserRouter，Route，Link，Switch，NavLink}；
从“/TestBlog.js”导入TestPage；
函数Blog（）{
返回(
博客
日期2020-日期2020（我的经验）
阅读更多
)
}

博文

import React from 'react';

function TestBlog() {
 
    return (
        <div>
        <header>

            <h1> Testing </h1>
            <p> Test Description </p>

        </header>
        </div>
    )

}

export default TestBlog

从“React”导入React；
函数TestBlog（）{
返回(
测试
测试描述

)
}
导出默认测试日志

这就是目前正在发生的情况

单击按钮转到博客帖子之前（从http://localhost:3000/blog):

点击按钮后，转到博客帖子（结束于http://localhost:3000/testpage，但是信息是附加的，而我希望页面清除/刷新，然后显示博客帖子信息）：

---

拜托，我真的很困惑，真的需要一些帮助。非常感谢您的任何帮助

默认情况下，将呈现您返回的所有内容。任何本应有时呈现，有时不基于url的内容都需要位于

中。您还可能会发现使用

非常有用，这样可以确保仅呈现其子路由中的一个，即使多个子路由会匹配其他路由。例如：

function Blog() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route path="/testpage" component={TestPage} />
          <Route path="/" component={HomePage} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

function HomePage() {
  return (
    <header>
      <h1> Blog </h1>

      <div class="card">
        <div class="container">
          <h4>
            <b> Date 2020 - Date 2020 (My experience)</b>
          </h4>

          <NavLink to="/testpage">
            <button type="button">Read More</button>
          </NavLink>
        </div>
      </div>
    </header>
  );
}

function Blog（）{
返回(
);
}
功能主页（）{
返回(
博客
日期2020-日期2020（我的经验）
阅读更多
);
}

---

因此，在这种情况下，将始终存在一个

，并且将始终存在一个

。在该div中，如果url与“/testpage”匹配，它将显示testpage组件。否则，主页组件将显示

您是上帝。非常感谢，我想问，如果我想在我的博客帖子代码中做一个后退按钮，我会怎么做？我会使用与您相同的方法还是其他方法？使用

const history=useHistory（）

获取历史对象。然后，当单击发生时，调用

history.goBack（）