在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链接,但不是。
关于页面上的布尔型console.logs:
但是NavActive样式仍然停留在portfolio
路线的'/'
上。
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};
`
答案 0 :(得分:1)
尝试一下吗?
Error
答案 1 :(得分:0)
我能够通过使用组件状态解决此问题
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);
答案 2 :(得分:-1)
尝试这三个步骤,为我解决了-
npm install --save-dev babel-plugin-styled-components
.babelrc
文件 {
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ],
],
"presets": ["next/babel"]
}
P.S-此答案的来源是GitHub