在 Reactjs 中使用路由器时无法返回上一页答案

【问题标题】：Not able to go back to previous page while using Router in Reactjs在 Reactjs 中使用路由器时无法返回上一页
【发布时间】：2020-09-13 11:35:52
【问题描述】：

我是 Reactjs 的新手。所以我正在制作一个基本网站，其中将有一个指向主页的链接、一个指向 隐私政策 的链接和一个指向条款和条件。下面是 App.js 的代码

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import PrivacyPolicy from './components/PrivacyPolicy';
import TermsAndConditions from './components/TermsAndConditions';
import Home from './components/Home';
import Footer from './components/Footer';
import Header from './components/Header';
import ReactDOM from 'react-dom';

function App() {

  return (
    <div>
      <Header/>
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/privacy-policy">PrivacyPolicy</Link>
            </li>
            <li>
              <Link to="/terms-and-conditions">TermsAndConditions</Link>

            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}

        <Switch>

          <Route path="/privacy-policy">
            <PrivacyPolicy />
          </Route>
          <Route path="/terms-and-conditions">
            <TermsAndConditions />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
    <Footer/>
    </div>
  );

}

export default App;

以下是 隐私政策 页面的代码，即 privacypolicy.js

import React from 'react';
import ReactDOM from 'react-dom';

function PrivacyPolicy() {

    const element =  (
        <div style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <span>{"some text"}</span>
        </div>
    );
    ReactDOM.render(element,document.getElementById('root'));
}

export default PrivacyPolicy;

现在是条款和条件页面的代码

import React from 'react';

function TermsAndConditions() {
    return (
        <div style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <span>{"some text."}</span>
        </div>
    );
}

export default TermsAndConditions;

现在的问题是，每当我通过单击主页上的链接进入隐私政策页面时，我都可以转到隐私政策页面，现在当按下 chrome 中的后退按钮时，链接会更改为主页，但页面是没有刷新它仍然显示隐私政策内容，而在条款和条件的情况下我可以回来。

请帮忙

【问题讨论】：

标签： reactjs react-dom

【解决方案1】：

将您的隐私政策更新为：

import React from 'react';


function PrivacyPolicy() {
    return (
        <div style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
            <span>{"some text"}</span>
        </div>
    );
}

export default PrivacyPolicy;

【讨论】：

哦，很抱歉我应该提到这一点。实际上，每当我点击隐私政策链接时，它都会呈现在同一页面（主页）上。我希望它在其他页面上呈现。
简单地说，每当我点击隐私政策链接时，隐私政策页面中的文本都会呈现在三个链接下方的同一页面上，我希望它呈现在一个全新的页面中