Why does @reach/router route paths automatically to page directory name?

I am currently using Gatsby and @reach/router

I would like to link my about page to '/profile'

my router looks like:

<Router>
  <Home path="/" />
  <About path="/profile" />
  <Blog path="/blog" />
  <Contact path="/contact" />
</Router>

Why is my about page being shown on '/about' and not '/profile'?

Also, where do you put your Router Component? Currently, the code above is my app.js file. Is this best practice?