Question

---------App.js------------------------
import "./styles.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Info from "./Info.js";
import Start from "./Start.js";
import End from "./End.js";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={Start} />
          <Route path="/Info" component={Info} />
          <Route path="/End" component={End} />
        </Switch>
      </Router>
    </div>
  );
}
---------Start.js------------------------
import React from "react";
import { Link } from "react-router-dom";

export default class Start extends React.Component {
  render() {
    return (
      <div>
        <h1>Welcome!</h1>
        <Link to="/Info">
          <button>Next</button>
        </Link>
      </div>
    );
  }
}
---------Info.js------------------------
import React from "react";
import { Link } from "react-router-dom";
import arg from "./Infos.json";

export default class Info extends React.Component {
  constructor() {
    super();
    this.state = {
      i: 0
    };
  }

  clickNext = () => {
    this.setState({ i: this.state.i + 1 });
  };
  clickBack = () => {
    this.setState({ i: this.state.i - 1 });
  };

  arr = arg.map((elem) => elem);

  render() {
    return (
      <div>
        <h1>{this.arr[this.state.i].info}</h1>
        <Link to={this.state.i > 0 ? "/Info" : "/"}>
          <button type="button" onClick={this.clickBack}>
            Back
          </button>
        </Link>
        <Link to={this.state.i < this.arr.length - 1 ? "/Info" : "/End"}>
          <button type="button" onClick={this.clickNext}>
            Next
          </button>
        </Link>
      </div>
    );
  }
}
---------End.js------------------------
import React from "react";
import { Link } from "react-router-dom";

export default class End extends React.Component {
  render() {
    return (
      <div>
        <h1>End!</h1>
        <Link to="/Info">
          <button>Back</button>
        </Link>
      </div>
    );
  }
}

---------Infos.json------------------------
[
  {
    "info": "info 1"
  },
  {
    "info": "info 2"
  },
  {
    "info": "info 3"
  },
  {
    "info": "info 4"
  }
]

所以我有： HomeScreen ⇾ Info1 ⇾ Info2 ⇾ Info3 ⇾ EndScreen

使用简单的按钮和路由器、交换机、链接可以完美地在它们之间导航。

在 InfoScreen-Instances（稍后将从 API 中获取）之间使用一个索引（数组索引）进行导航，该索引根据我们所在的位置递增或递减。

我的问题是在 EndScreen-Component 中，我有一个后退按钮，它应该带我回到最后一个 Info-Instance（在这个例子中：Info3）。问题是，当我按下 EndScreen 中的后退按钮时，第一个索引为 0 的信息实例（在本例中为：Info1）再次出现。

这意味着在 Info-Component 中操作的索引没有被保存，因此当我尝试从其他组件（在本例中：EndScreen）返回到具有该索引的相同组件时，我可以返回到最后呈现的信息组件实例。

我正在使用类组件（也尝试过使用函数组件），长期以来我一直在尝试太多方法，但仍然不知道如何去做。

任何人都可以建议如何正确浏览组件？？？

Answer 1

问题似乎在于您的组件在导航到新 URL (some documentation) 时被卸载。因此，状态不会被保留。

很难用这么小的例子来判断什么最有效，或者你到底想做什么。根据您的需要，有多种选项可用于跟踪上一个信息屏幕。

您可以 lift state up 到每次 URL 更改时都不会卸载的父组件。
如果您只需要知道前一个组件的信息屏幕编号，并且它不存储其他状态，您可以将信息屏幕编号存储在查询字符串中，您就可以从react-router-dom 中的 location 对象（使用函数组件时，您将使用 useLocation() 检索此对象。
您可以使用查询字符串或使用 slug 导航到特定的信息屏幕。要获取函数组件中 slug 的值，您可以使用 useParams() 钩子。

对于选项 2 和 3，后退按钮实际上必须转到上一个 URL（包括 slug 或查询字符串）。他们还假设您仅在信息屏幕的状态下存储屏幕索引。

React：组件（组件实例）之间的导航

所以我有： HomeScreen ⇾ Info1 ⇾ Info2 ⇾ Info3 ⇾ EndScreen

1 个答案: