React/Nextjs - 知道在 _app.js 上渲染了什么页面

Question

So I'm trying to render my web nav and footer on my _app.js. I wanted to dynamically change the style of my nav/footer depending on the page being accessed. I thought about putting the nav and footer to the individual pages instead but i don't think it's best practice.

How do I know what page im accesing inside _app.js

ex.

pages/index.js
pages/profile.js

in my _app.js i will change the style of nav and footer depending on the page accesed.

Answer 1

I think you can based on Router.pathName in Nextjs to change the style of nav and footer like this:

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;
    }
  }
}

See this PR to more information: Add pathname and query to the argument of getInitialProps

---

EDIT

In your case, My suggest is connect to Redux and save current url at level Component into store. Then, in _app.js , you will get this to handle style nav or footer. Example:

At Component:

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()
   }
}

At Reducer:

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

At app.js // make sure connected to Redux at here

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

Answer 2

You may use the document object.

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

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