据我所知,Nextjs 通过将 URL 映射到它们各自的文件pages
夹中的文件来解析 URL 。因此pages/about-us.js
可以通过href="/about-us"
.
我想创建多种语言但不想复制必要的组件/JS 文件。所以假设我有about-us.js
以下内容:
<Head title={meta}/>
<Nav/>
<MainContent language={lang}/>
<Footer/>
如何在不创建另一个.js 的情况下映射/pl/about-us
到/about-us
页面根目录中的about-us
.js /pages/pl/..
?
我能想到的解决方案之一是将语言作为查询参数传递
例子
// code for page/about-us.js page
import { withRouter } from 'next/router';
const AboutUs = ({ router }) => {
const { lang } = router.query;
return <div>Welcome to next.js! Language = {lang}</div>;
};
export default withRouter(AboutUs);
所以如果你到了about-us?lang=pl
它会显示
Welcome to next.js! Language = pl
或者,您可以将自定义 app.js与类似这样的代码一起使用,而不是在每个页面中解析语言
// custom _app.js
import React from 'react'
import App, { Container } from 'next/app'
export default class MyApp extends App {
static async getInitialProps({ Component, router, ctx }) {
let pageProps = {}
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx)
}
return { pageProps }
}
state = {
language: undefined
};
componentDidMount() {
const { router } = this.props;
this.setState({ language: router.query.lang });
}
render () {
const { Component, pageProps } = this.props
return (
<Container>
<Component {...pageProps} language={this.state.langugage} />
</Container>
)
}
}
所以每个页面都language
将作为参数传递。
希望这可以帮助。
更新:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句