ReactJS：动态链接到下一页

Question

我有一个包含路由的 App.jsx，我有一个组件 NextPage.jsx，它是一个应该指向下一页的简单链接。我的问题是：如何告诉 NextPage 组件中的链接指向下一页？所以如果我在主页中，链接应该让我去投资组合，如果在投资组合上，我应该能够去技能等等。

这是我的 App.jsx

const App = () => (
  <div className="main-container">
    <Menu/>
    <NextPage/>
    <AnimatedSwitch
      atEnter={{ offset: 100}}
      atLeave={{ offset: -100}}
      atActive={{offset: 0}}
      mapStyles={(style) => ({
        transform: `translateX(${style.offset}%)`,
      })}
    >
      <Route exact path="/" component={Homepage} />
      <Route path="/portfolio" component={Portfolio} />
      <Route path="/skills" component={Skills} />
      <Route path="/contacts" component={Contacts} />
      <Route path='*' component={NotFound} />
    </AnimatedSwitch>
  </div>  
);

export default App;

这是我的 NextPage.jsx

const NextPage = () => (
        <div className="next-arrow">
          <Link to='#HEREGOESTHENEXTPAGELINK#'><i className="fa fa-angle-right" aria-hidden="true"></i></Link>
        </div>
    );

export default NextPage;

Answer 1

在我看来，您实现这一点的方法似乎有点奇怪，但我离题了。

您需要做的第一件事是以某种方式存储所有链接以及它们的出现顺序。我要说的最大问题是在哪里你要存储它；您可以将其存储在数据库中、创建全局变量、将其存储在舞台管理库中（如果您使用的话）等等。

目前还不清楚您使用哪一个以及您更喜欢哪一个，所以我将把它留给您，并在下面介绍一下这个概念。

---

在你的根 React 组件中定义一个包含所有链接的数组。您可以在构造函数中执行此操作：

class MyApp extends React.Component {
  constructor() {
    super();
    window.links = ["/", "/portfolio", "/skills", "/contacts"];
  }

  render() ...
}

这将使window.links 在所有组件中都可以访问。这意味着您比较活动 url，在数组中查找它，然后让链接将您定向到下一个。

const NextPage = (props) => {
  let idx = window.links.indexOf(props.route.path) + 1;
  let link = (idx == window.links.length) ? window.links[0] : window.links[idx];
  return (
    <div className="next-arrow">
      <Link to={link}><i className="fa fa-angle-right" aria-hidden="true"></i></Link>
    </div>
  );
}

export default NextPage;

请注意，如果当前链接不是window.links 中定义的链接之一，该链接会将您带到第一个。