web-dev-qa-db-fra.com

Comment créer des itinéraires avec des paramètres dans Gatsbyjs

Je veux créer un itinéraire qui utilise un slug comme paramètre dans mon site Web généré par Gatsby.

J'ai une liste de projets qui se trouvent sur la route /projects/<slug>.

Habituellement, avec le routeur React, je créais un itinéraire comme ceci:

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

Il semble que dans gatsby, je dois créer un nouveau fichier sous le ./pages répertoire et qui crée une nouvelle route. J'ai une page appelée projects où j'essaie de faire une recherche sur le paramètre d'itinéraire mais ne semble obtenir que la page 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;

Comment puis-je avoir des itinéraires avec des paramètres dans Gatsby?

Je viens de rencontrer routes client uniquement mais je suppose que ces routes ne seront pas générées statiquement.

J'aurai une liste prédéfinie de slugs alors peut-être qu'il y a un moyen de créer une page pour chacun des slugs du projet? Je suppose que je pourrais créer manuellement un fichier dans ./pages/projects/<slug> projet foreach que j'ai?

javascriptreactjsgatsby
9
Stretch0

Vous voudrez utiliser la méthode createPage que Gatsby vous donne à l'intérieur gatsby-node.js's createPages API. Il y a n guide dans la documentation de Gatsby qui montre que vous pouvez réaliser exactement cela. Voici un exemple encore plus simple d'une question similaire.

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