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

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 的第一个 Info-Instance（在本例中为 Info1）再次出现。

这意味着在 Info-Component 中操作的索引没有被保存，因此当我尝试从其他组件（在本例中为 EndScreen）返回到最后渲染的 Info-Component-Instance。

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

---

谁能建议如何正确浏览组件？？？

Answer 1

看起来问题在于导航到新 URL (some documentation) 时正在卸载组件。因此，状态不会被保留。

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

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

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

Answer 2

您似乎使用的是旧版本的 react-router-dom。 你应该使用最新版本（v6），有一些变化，比如 Switch 变成了“Routes”等等。 只需在这里查看https://reactrouter.com/docs/en/v6/getting-started/tutorial 即可解决您的问题。

import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/" element={<Start />} />
          <Route path="/Info" component={<Info >} />
          <Route path="/End" component={<End />} />
        </Routes>
      </Router>
    </div>
  );
}