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

问题描述

我是 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 中的后退按钮时，链接会更改为主页但页面没有刷新仍在显示隐私政策内容，而在条款和条件的情况下，我可以回来。

请帮忙

标签： reactjsreact-dom

import React from 'react'; function PrivacyPolicy() { return ( <div style={{ flex: 1, alignItems: "center", justifyContent: "center" }}> <span>{"some text"}</span> </div> ); } export default PrivacyPolicy;

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

问题描述

解决方案

推荐阅读