在我的 NextJS 应用程序的 _app.tsx
中,我使用 从 'next/router' 导入 Router
以便为我的顶部菜单呈现不同的导航按钮样式。
当路径为 /
时,渲染有效,但是当我位于 /about
时,渲染不起作用,并且出现以下错误。即使 bool 逻辑工作正常。
错误:
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"
在下面的屏幕截图中,我当前位于 /about
路径上,并且 NavActive 样式应应用于 about 链接,但事实并非如此。
关于页面上的 bool 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};
`
最佳答案
试试这个怎么样?
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>
关于javascript - NextJS React 应用程序样式组件未正确渲染 : Warning: Prop `className` did not match,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55088999/