React手动输入路由地址后如何通过浏览器返回按钮回到上一页

问题根因 #

1. 你在Productpage组件的顶层直接调用了history.push("/products")，组件每渲染一次就会往路由历史栈里新增一条完全相同的/products记录，点击返回按钮时实际是在不断弹出你自己重复推入的/products记录，所以看起来一直停留在当前页面。
2. 用户手动在地址栏输入/products直接访问该路由时，浏览器的历史栈里默认只有/products这一条记录，本来就没有首页的历史记录，自然没法通过返回按钮跳回首页。

解决方法 #

第一步：删除无效的重复push逻辑 #

先把Productpage里的history.push("/products")这行代码删掉，避免重复往历史栈里推入相同路由。
修改后的Productpage示例：

import { Link, useHistory, useLocation } from "react-router-dom";
import Products from "./products";
export default function Productpage() {
  let history = useHistory();
  // 删除 history.push("/products") 这行代码
  console.log(history)
  return (
    <div>
      {/* 页面实际内容 */}
    </div>
  );
}

第二步：实现直接访问子路由也可返回首页（可选，按需使用） #

如果需要满足即使用户直接输入地址访问/products，也能通过返回按钮回到首页的需求，可以在Productpage首次挂载时判断历史栈状态，手动补充首页记录：

import { useEffect } from 'react';
import { Link, useHistory, useLocation } from "react-router-dom";
import Products from "./products";
export default function Productpage() {
  let history = useHistory();
  useEffect(() => {
    // 历史栈长度为1说明是用户直接输入地址打开的当前页
    if (window.history.length === 1) {
      // 先把当前的/products记录替换为首页
      history.replace('/');
      // 再推入/products，历史栈就会生成 / -> /products 两条记录
      history.push('/products');
    }
  }, [history])

  return (
    <div>
      {/* 页面实际内容 */}
    </div>
  );
}

额外优化：完善路由结构 #

给所有Route外层加上Switch组件，保证同一时间只会匹配一个路由，减少意外匹配问题：

import Productpage from "./productpage";
import Aboutpage from "./aboutpage";
import AProductPage from "./individualProductPage";
import Contactpage from "./contact";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Router>
        {/* 用Switch包裹所有Route */}
        <Switch>
          <Route exact path="/">
            <ul>
              <Link to="/products">
                <li>products</li>
              </Link>
              <Link to="/about">
                <li>about</li>
              </Link>
            </ul>
          </Route>
          <Route exact path="/about">
            <Aboutpage />
          </Route>
          <Route exact path="/products">
            <Productpage />
          </Route>
          <Route path="/products/:id">
            <AProductPage />
          </Route>
          {/* <Route exact path="/o">
            <Contactpage />
          </Route> */}
        </Switch>
      </Router>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者bearthum