Question

因此，我尝试在_app.js上呈现Web导航和页脚。我想根据正在访问的页面动态更改导航/页脚的样式。我曾考虑过将导航栏和页脚放到各个页面上，但是我认为这不是最佳实践。

我怎么知道_app.js内访问哪个页面

例如。

pages/index.js
pages/profile.js

在我的_app.js中我将根据访问的页面更改导航和页脚的样式。

Answer 1

我认为您可以基于Nextjs中的Router.pathName来更改导航和页脚的样式，如下所示：

const get firstPathName = pathName => pathName.split("/")[1]
export default class extends React.Component {
  getInitialProps ({ pathname, query }) {
    switch(firstPathName(pathname)) {
       case "":
       case "index": // style nav and footer with index.js
         break;
       case "profile": // style nav and footer with profile.js
         break;
       default: // do with default 
         break;
    }
  }
}

有关更多信息，请参见此PR：https://dev.mysql.com/doc/refman/5.6/en/innodb-row-format.html

编辑

对于您而言，我的建议是连接到Redux并将level Component上的当前URL保存到存储中。然后，在_app.js中，您将获得此样式来处理样式导航或页脚。示例：

在组件上：

const connectToRedux = connect(null, dispatch => ({
   changeCurrentUrl: () => dispatch({ 
       type: "CHANGE_CURRENT_URL", payload: firstPathName(Router.pathName)
   })
}))
componentWillMount() {
   if (process.browser) { // make sure isClient in Nextjs
       this.props.changeCurrentUrl()
   }
}

在Reducer：

export default {
   currentUrl: (state = "", action) => {
      if (action.type === "CHANGE_CURRENT_URL") {
          state = action.payload;
      }
      return state;
   }
}

在app.js //确保在此处连接到Redux

componentWillMount() {
   const { currentUrl } = this.props
   // handle style nav and footer here depending on url
}

Answer 2

您可以使用 document 对象。

const [url, setUrl] = useState('')

useEffect(() => {
  setUrl(document.URL)
}, [document.URL])

React / Nextjs-知道_app.js呈现什么页面

2 个答案: