使用 React Router 更改链接文本时链接回上一页答案

【问题标题】：Link back to previous page while link's text changes using React Router使用 React Router 更改链接文本时链接回上一页
【发布时间】：2021-02-11 12:44:31
【问题描述】：

请在stackblitz 上查看我的代码。

这就是我想要的：

我希望导航栏上的主页链接成为上一页的链接。（例如，在Level1 页面中，首页链接应该带我回到Category1 页面。）
在上面引用的同一示例中，当我在Level1 页面时，我希望“主页” 链接的文本更改为“类别1”；当我在Category1 页面时，我希望链接变回“主页”。 In short, the link's text would be the name of the previous page. 但是当我在首页时，我希望它更改为“欢迎！”
我希望这一切都是动态的。

这是最初的 Navbar.js：

import React from "react";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <nav>
      <Link to="/">
        <p className="home-link">Home</p>
      </Link>
    </nav>
  );
};

export default Navbar;

请帮忙。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您不能通过此示例获取当前路由的父级并将其设置在 home BTN 的内部文本上。

window.location.pathname.split('/')[window.location.pathname.split('/').length - 2]

您想回到上一步的每个地方，这行代码都可以帮助您显示上一步的名称和上一步的路由器，这也取决于您当前的 URL，因此您可以推送到历史记录以更改路线或显示给用户

【讨论】：