개발 이야기/개발 및 서비스
NextJS/Link, Component, Router - Only Code
가온아
2022. 8. 12. 09:40
(Hello Page 만들기-https://ongamedev.tistory.com/498- 코드에서 이어집니다.)
mkdir components && cd "$_"
vi header.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Link from 'next/link'
const linkStyle={marginRight: 15}
export default () => (
<div>
<Link href="/">
<a style={linkStyle}> Home </a>
</Link>
<Link href="/admin">
<a style={linkStyle}> Admin </a>
</Link>
</div>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
vi layout.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Header from '/components/header'
const layoutStyle = {
margin: 10,
padding: 10,
border: '1px soild #DDD'
}
export default (props) => (
<div style={layoutStyle}>
<Header />
{props.children}
</div>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
cd .. && cd pages && mkdir admin && cd "$_"
vi index.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Layout from '/components/layout'
import Link from 'next/link'
const MenuLink = (props) => (
<li>
<Link href={{
pathname: '/admin/menu',
query: {title:props.title}
}}>
<a>{props.title}</a>
</Link>
</li>
)
export default () => (
<Layout>
<h1> Admin Menu </h1>
<ul>
<MenuLink title="Dashboard" />
<MenuLink title="Management" />
</ul>
</Layout>
)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
vi menu.js
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import Layout from '/components/layout'
import { withRouter } from 'next/router';
const Menu = ({router:{query}}) => {
if(query.title == "Dashboard"){
return(
<Layout>
<h1>{query.title}</h1>
</Layout>
)
}else if(query.title == "Management"){
return(
<Layout>
<h1>{query.title}</h1>
<p> <Link href="https://ongamedev.tistory.com/499">read detail</Link> </p>
</Layout>
)
}
}
export default withRouter(Menu)
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
cd .. && cd ..
npm run dev
(*full source code link)
반응형