Suppose this example with two articles (full example here 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
How do I create a link in the intro
article to open the work
article? In the example there's an <a href='#work'>
, but when I click it there's no action at all.
You can do it by importing 'Link' from Next.js:
import Link from "next/link";
Then you can add:
<Link href="work">
<a>Go To Work!</a>
</Link>
Full documentation from Next.js: https://nextjs.org/docs/api-reference/next/link
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.