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

Question

我是新手 Reactjs.So 我正在制作一个基本网站，其中将有一个指向主页的链接，一个指向隐私政策的链接以及一个指向条款和条件的链接。 下面是应用程序的代码.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;

以下是隐私政策页面的代码，即隐私政策.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;