鸿蒙js中，底部导航栏可以用自定义组件来做吗？

我想要在鸿蒙js中，用自定义组件来做底部导航栏。想请教一下这个组件做出来后，这个文件放在哪里？我看到文档里面的例子是放在的common里面，新建了一个组件的文件夹。但是我新建组件文件夹的之后，就会报错。
我目前是放在了pages里面。
另外，我应该怎么在每个页面引入，能够点击相应的内容，切换相应的页面；
同时切换页面的时候，组件也能够切换相应的状态。是不是需要判断一下页面路由？

如图，我做出来的组件长这样，想要作为底部导航栏。选中的时候，会改变颜色（这个步骤已经在组件内部实现。）现在主要是不知道怎么引入页面。