将 Nextjs URL 解析为选定的组件答案

【问题标题】：Resolve Nextjs URL to a selected component将 Nextjs URL 解析为选定的组件
【发布时间】：2018-10-02 10:21:31
【问题描述】：

据我了解，Nextjs 通过将 URL 映射到 pages 文件夹中的相应文件来解析 URL。所以pages/about-us.js 可以通过href="/about-us" 访问。

我想创建多种语言，但不想复制必要的组件/JS 文件。所以假设我有一个about-us.js，内容如下：

<Head title={meta}/>
<Nav/>

<MainContent language={lang}/>
<Footer/>

如何将/pl/about-us 映射到页面根目录中的/about-us.js 而不在/pages/pl/.. 中创建另一个about-us.js？

【问题讨论】：

标签： javascript next.js

【解决方案1】：

我能想到的解决方案之一是将语言作为查询参数传递

例子

// 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

或者不是在每个页面中解析语言，您可以使用custom 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 作为参数传递。

希望这会有所帮助。

更新：

要进行自定义路由，您需要检查 disabling file-system routing 并写一些 custom server routing

【讨论】：

谢谢，但我想映射路线，因为资源比 SEO 的查询字符串更好。
哦，我明白了。我想这样你需要检查disabling file-system routing并写一些custom server routing
@yayokk 完美，后者工作正常。也许你可以修改答案。