In my NextJS app's _app.tsx
I am using import Router from 'next/router'
in order to render different nav button styles for my top menu.
When the path is /
the rendering works, however when I'm on /about
the render does not work and I get the following error. Even though the boolean logic is working correctly.
Error:
Warning: Prop
className
did not match. Server: "nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc-6btkfp-1 bvpMWI" Client: "nav__NavLink-sc-6btkfp-1 bvpMWI"
In this screenshot below, I'm currently on the /about
path and the NavActive style should be applied to the about link, but it's not.
The boolean console.logs on the about page:
However the NavActive style is still stuck on portfolio
which is the '/'
route.
_app.tsx
import React from 'react'
import Router from 'next/router'
import App, { Container } from 'next/app'
import withReduxStore from '../lib/withReduxStore'
import { Provider } from 'react-redux'
import Page from '../components/Page/Page'
import { Nav, NavLink, NavActive } from '../styles'
interface IProps {
reduxStore: any;
location: string;
}
const pluckRoute = (Router: any) => Router ? Router.pathname : '/';
class MoonApp extends App<IProps> {
render() {
const { Component, reduxStore } = this.props;
const currentRoute = pluckRoute(Router.router);
console.log('currentRoute', currentRoute);
const NavPortfolio = currentRoute === '/' ? NavActive : NavLink;
const NavAbout = currentRoute === '/about' ? NavActive : NavLink;
console.log(currentRoute === '/');
console.log(currentRoute === '/about');
return (
<Container>
<Provider store={reduxStore}>
<Page>
<Nav>
<ul>
<li><NavPortfolio href="/">Portfolio</NavPortfolio></li>
<li><NavAbout href="/about">About</NavAbout></li>
</ul>
</Nav>
<Component />
</Page>
</Provider>
</Container>
)
}
}
export default withReduxStore(MoonApp);
My nav styles
import styled from 'styled-components'
export const Nav = styled.div`
width: 100px;
ul {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 30px 0 0 30px;
}
li { margin-right: 1.5rem; list-style: none; }
`
export const NavLink = styled.a`
color: ${props => props.theme.apricot};
border: none;
&:hover { color: ${props => props.theme.offWhite}; }
`
export const NavActive = styled(NavLink)`
color: ${props => props.theme.offWhite};
border-bottom: 2px solid ${props => props.theme.apricot};
`