在Reactjs中使用Router时无法返回上一页。

Question

我是一个新的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;

以下是App.js的代码 私隐政策 页面是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中按下后退按钮时，链接变为主页，但页面没有刷新，仍然显示隐私政策内容，而在条款和条件的情况下，我能够回来。

请帮助

Answer 1

更新您的隐私政策。

import React from 'react';


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

export default PrivacyPolicy;