时间戳

首页 > 解决方案 > React：组件之间的导航（组件实例）

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

问题描述

---------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 时，我可以使用该索引返回到同一个组件-组件-实例。

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

任何人都可以建议如何通过组件正确导航吗？？？

标签： reactjsbuttonnavigationrouter

解决方案

看起来问题是导航到新 URL（一些文档）时正在卸载您的组件。因此，状态不被保留。

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

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

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

推荐阅读