NextJS React 应用程序样式的组件渲染不正确：警告：道具`className`不匹配

Question

在我的 NextJS 应用程序的 _app.tsx 中，我使用 import Router from 'next/router' 来为我的顶部菜单呈现不同的导航按钮样式。

当路径为/ 时，渲染有效，但是当我在/about 上时，渲染不起作用，并且出现以下错误。即使布尔逻辑工作正常。

错误：

警告：道具className 不匹配。服务器：“nav__NavActive-sc-6btkfp-2 gJVDzS nav__NavLink-sc-6btkfp-1 bvpMWI”客户端：“nav__NavLink-sc-6btkfp-1 bvpMWI”

在下面的屏幕截图中，我当前位于/about 路径上，应该将 NavActive 样式应用于 about 链接，但事实并非如此。

about 页面上的布尔型 console.logs：

但是，NavActive 样式仍然停留在 portfolio 上，这是 '/' 路线。

_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);

我的导航样式

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

Answer 1

试试这三个步骤，它解决了我 -

1. npm install --save-dev babel-plugin-styled-components
2. 创建.babelrc 文件
3. 把下面的代码粘贴进去

    {
        "plugins": [
          ["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
        ],
        "presets": ["next/babel"]
    }

P.S - 这个答案的来源是GitHub

Answer 2

试试这个怎么样？

import Link from 'next/link'

...

const pluckRoute = (Router: any) => Router ? Router.pathname : '/';

...

const currentRoute = pluckRoute(Router.router);
const NavPortfolio = currentRoute === '/' ? NavActive : NavLink;
const NavAbout = currentRoute === '/about' ? NavActive : NavLink;

...


<li>
  <Link href={`/`}>
    <NavPortfolio>Portfolio</NavPortfolio>
  </Link>
</li>
<li>
  <Link href={`/about`}>
    <NavAbout>About</NavAbout>
  </Link>
</li>

Answer 3

我能够通过使用组件状态来解决问题

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 {
  Component: any;
  reduxStore: any;
  pageProps: any;
  router: any;
}

interface IState {
  path: string;
}

const pluckRoute = (Router: any) => Router ? Router.pathname : '/';

const pathIs = (path: string) => {
  switch (path) {
    case '/': { return 'portfolio'; }
    case '/about': { return 'about'; }
    default: return 'portfolio';
  }
}

class MoonApp extends App<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      path: ''
    }
  }

  componentDidMount() {
    const path = pathIs(pluckRoute(Router.router));
    this.setState({ path });
  }

  render() {
    const { Component, reduxStore } = this.props;
    const { path } = this.state;

    const NavPortfolio = path === 'portfolio' ? NavActive : NavLink;
    const NavAbout = path === 'about' ? NavActive : NavLink;

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