web-dev-qa-db-ja.com

gatsbyjsでparamsを使用してルートを作成する方法

ギャツビーが生成したWebサイトで、スラッグをパラメーターとして使用するルートを作成したいと考えています。

ルート/projects/<slug>にあるプロジェクトのリストがあります。

通常、ルータを反応させると、次のようなルートが作成されます。

<Route exact path='/projects/:project' component={Projects} />

ギャツビーのようですが、./pagesディレクトリの下に新しいファイルを作成する必要があり、それによって新しいルートが作成されます。 projectsというページがあります。ここでは、ルートパラメータを調べてみましたが、404ページしか取得していないようです。

// ./pages/projects.js

class SingleProject extends Component {

  state = {
    project: {}
  }

  componentDidMount(){
    const project = this.props.projects.find(project => project.slug === this.props.match.params.project)
    this.setState({project})
  }

  render() {
    return (
      <div className="single-project" >
      </div>
    )
  }
}

export default SingleProject;

ギャツビーでパラメーター付きのルートを作成するにはどうすればよいですか？

私はちょうど クライアントのみのルート に遭遇しましたが、これらのルートは静的に生成されないと思います。

スラグの定義済みリストがあるので、プロジェクトスラグごとにページを作成する方法はあるでしょうか。私が持っている./pages/projects/<slug> foreachプロジェクト内に手動でファイルを作成できると思いますか？

javascriptreactjsgatsby
9
Stretch0

Gatsbyがgatsby-node.jsの-​​ createPage API内で提供するcreatePagesメソッドを使用する必要があります。これを正確に達成できることを示す ガイド がギャツビーのドキュメントにあります。 これはさらに簡単な例です 同様の質問から。

export const createPages = ({ actions }) => {
  const { createPage } = actions;

  createPage({
    path: '/projects/hello-world',
    component: SingleProject,

    // Send additional data to page component
    context: {
      id: 'hello-world',
    },
  });
};
7
Fabian Schultz