javascript - 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 在所有组件中均可访问。这意味着您可以比较事件网址，在数组中查找它，然后通过链接将您定向到下一个网址。

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 中定义的链接之一，则该链接会将您带到第一个链接。