title: How to create routes with params in gatsbyjs
body: <p>I want to create a route that uses a slug as a parameter in my gatsby generated website.</p>
  
  <p>I have a list of projects that sit on the route <code>/projects/&lt;slug&gt;</code>.</p>
  
  <p>Usually with react router I would create a route like so:</p>
  
  <pre><code>&lt;Route exact path='/projects/:project' component={Projects} /&gt; 
  </code></pre>
  
  <p>It seems in gatsby, I have to create a new file under the <code>./pages</code> directory and that creates a new route. I have a page called <code>projects</code> where I try do a look up on the route param but only seem to get the 404 page.</p>
  
  <pre><code>// ./pages/projects.js
  
  class SingleProject extends Component {
  
    state = {
      project: {}
    }
  
    componentDidMount(){
      const project = this.props.projects.find(project =&gt; project.slug === this.props.match.params.project)
      this.setState({project})
    }
  
    render() {
      return (
        &lt;div className="single-project" &gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default SingleProject;
  </code></pre>
  
  <p>How can I have routes with parameters in gatsby?</p>
  
  <p>I have just come across <a href="https://www.gatsbyjs.org/docs/building-apps-with-gatsby/" rel="noreferrer">client only routes</a> but I guess these routes wont be statically generated.</p>
  
  <p>I will have a predefined list of slugs so perhaps there is a way to create a page for each of the project slugs? I guess I could manually create a file within <code>./pages/projects/&lt;slug&gt;</code> foreach project I have? </p>