React.js / Next.js - 如何從一篇文章鏈接到另一篇文章？

Question

假設這個例子有兩篇文章（完整的例子在這里https://github.com/codebushi/nextjs-starter-dimension/blob/master/components/Main.js ）

import PropTypes from 'prop-types';

class Main extends React.Component {
  render() {

    let close = <div className="close" onClick={() => {this.props.onCloseArticle()}}></div>

    return (
      <div id="main" style={this.props.timeout ? {display: 'flex'} : {display: 'none'}}>

        <article id="intro" className={`${this.props.article === 'intro' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
          <h2 className="major">Intro</h2>
          <span className="image main"><img src="/static/images/pic01.jpg" alt="" /></span>
          <p>Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
          {close}
        </article>

        <article id="work" className={`${this.props.article === 'work' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
          <h2 className="major">Work</h2>
          <span className="image main"><img src="/static/images/pic02.jpg" alt="" /></span>
          <p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.</p>
          {close}
        </article>

      </div>
    )
  }
}

Main.propTypes = {
  route: PropTypes.object,
  article: PropTypes.string,
  articleTimeout: PropTypes.bool,
  onCloseArticle: PropTypes.func,
  timeout: PropTypes.bool
}

export default Main

如何在intro文章中創建鏈接以打開work文章？ 在示例中有一個<a href='#work'> ，但是當我單擊它時，根本沒有任何動作。

Answer 1

您可以通過從 Next.js 導入“鏈接”來實現：

import Link from "next/link";

然后你可以添加：

    <Link href="work">
          <a>Go To Work!</a>
    </Link>

Next.js 的完整文檔： https://nextjs.org/docs/api-reference/next/link