使用路由器反应导航返回按钮更改状态

Question

在这里反应菜鸟。我有这个带有页眉、页脚和导航栏的主页，点击每个导航栏 link 会通过更改状态显示不同的组件。

我正在尝试实施 react-router-dom，但当我使用 go back 按钮到我之前的 component/link 时遇到问题。例如，我会依次看到 comp2 和 comp3，然后按 go back 按钮在 comp3 处看到 comp2，但没有显示任何组件。由于我正在使用状态 activeTab 来呈现我想要的组件，因此 go back 按钮在返回到上一个时似乎不会调用 setTab。有没有一种实现路由器的方法，这样我就可以自由地 go back / go forward 呈现我想要的组件而不改变我实现导航栏的方式？

App.js

import React, { useState } from "react";
import { Route } from "react-router-dom";
import Navbar from "./Navbar";
import Header from "./Header";
import Footer from "./Footer";
import Comp1 from "./Comp1";
import Comp2 from "./Comp2";
import Comp3 from "./Comp3";

function App() {
  const [activeTab, setTab] = useState(0);

  const TABS = {
    0: <Route path="/comp1" render={() => <Comp1 />} />,
    1: <Route path="/comp2" render={() => <Comp2 />} />,
    2: <Route path="/comp3" render={() => <Comp3 />} />
  };

  return (
    <>
      <div>
        <Header />
        <Navbar setTab={setTab}></Navbar>
        {TABS[activeTab]}
        <Footer />
      </div>
    </>
  );
}

export default App;

Navbar.js

import React from "react";
import { Nav, NavItem, NavLink } from "reactstrap";
import { Link } from "react-router-dom";

const Navbar = (props) => {
  return (
    <>
      <Nav>
        <NavItem>
          <Link to="/comp1" onClick={() => props.setTab(0)}>
            Comp1
          </Link>
        </NavItem>
        <NavItem>
          <Link to="/comp2" onClick={() => props.setTab(1)}>
            Comp2
          </Link>
        </NavItem>
        <NavItem>
          <Link to="/comp3" onClick={() => props.setTab(2)}>
            Comp3
          </Link>
        </NavItem>
      </Nav>
    </>
  );
};
export default Navbar;

这里是 CodeSandbox.io 中重新创建的示例 - https://codesandbox.io/s/musing-snyder-ipyfn?file=/src/App.js

提前致谢！

Answer 1

在浏览器中使用后退和前进按钮不会像我们预期的那样更新应用程序状态，它实际上是在清除您的状态。

https://reactrouter.com/web/example/nesting

在此处查看挂钩的使用，了解它们如何处理浏览器前后移动，同时仍然更新正在呈现的组件。

Answer 2

你可以通过路由器来完成。它允许您相对于 URL 进行相同的导航并呈现组件。

我已经更新了您的代码以在沙箱中演示相同的内容。请看一看。 https://codesandbox.io/s/little-tdd-bddu5?file=/src/App.js

注意：App.js 和 NavBar.js 已更新。

Answer 3

路由按预期运行。但它是如何处理您的组件状态的。

我已经清理了你的代码。路由器逻辑和组件路由通常不需要状态。浏览器 URL 决定组件。

https://codesandbox.io/s/sharp-murdock-lt2j3?file=/src/App.js:380-598

您需要使用 switch case 来正确处理路由，以便考虑第一个路径匹配。

<Switch>
   <Route path={menus.COMP1} render={() => <Comp1 />} />
   <Route path={menus.COMP2} render={() => <Comp2 />} />
   <Route path={menus.COMP3} render={() => <Comp3 />} />
</Switch>

导航栏可以无状态：

const Navbar = () => {
  return (
    <>
      <Nav>
        <NavItem>
          <Link to="/comp1">Comp1</Link>
        </NavItem>
        <NavItem>
          <Link to="/comp2">Comp2</Link>
        </NavItem>
        <NavItem>
          <Link to="/comp3">Comp3</Link>
        </NavItem>
      </Nav>
    </>
  );
};

使用路由器反应导航返回按钮更改状态

React navigation with router go back button change state

javascript

navigation

reactjs

react-router

react-router-dom