Next.js Router問題

nextjs react reactjs router react-router-dom

gary11159 2020-10-14 15:38:52 ‧ 1615 瀏覽

想請教一下在react-router-dom的路由簡單設定如下

<Header/>
<Route path="/" exact component={Index} />
<Route path="/books" component={Books} />

依我理解是渲染Header和 Index或Books(依照路徑)總共兩個Component

而我希望在Next.js中也能實現此方法，但我看了教學文件都是使用Link或是Router.push

<Header/>
<Link href="/">首頁</Link>
<Link href="/books">書籍</Link>

這樣就會造成我點了"書籍"就只會渲染Books Component，我的Header就不會被渲染出來了

想請問Next.js有辦法做到我上面說到(react-router-dom)的情境嗎?

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

DanSnow

iT邦好手 1 級 ‧ 2020-10-14 17:31:12

你需要建一個 custom 的 App 在 pages/_app.js，可以參考文件

內容大概是：

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Header />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

立即登入回答