Javascript React/Nextjs-知道app.js上呈现的页面

所以我试图在我的app.js上呈现我的网页导航和页脚。我想根据所访问的页面动态更改导航/页脚的样式。我想把导航和页脚放在单独的页面上，但我认为这不是最好的做法

我如何知道我在app.js中访问的页面

前

在my_app.js中

---

我将根据访问的页面更改导航和页脚的样式。

我认为您可以根据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：

---

编辑

在您的情况下，我建议连接到

Redux

，并将

级别组件的当前url保存到存储中。然后，在
\u 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()
   }
}

在减速器处：

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
}

您可以使用
文档
对象

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

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

我尝试了这个实现，但只有在普通页面中使用它时，它才有效。但是在app.js里面。它返回未定义：（你的应用程序中是否有Redux？是的。我想也许我可以在每个页面上发送一个操作，但我不确定这是否是最佳实践是的，我也认为这是一种正确的方法。我编辑了我的代码。
const [url, setUrl] = useState('')

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