Question

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

我正在尝试实现react-router-dom，使用go back按钮到上一个组件/链接时遇到问题。例如，我将依次看到comp2和comp3，然后在go back时按comp2按钮查看comp3，但是没有任何组件显示。由于我正在使用状态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

您可以通过Router来完成。它允许您针对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>
   <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>
    </>
  );
};

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

3 个答案: