I want to set up my router in pages/index.js and gatsby-node.js file to show user profiles via dynamic links. The user profile should have a URL like this: https://domain/user_name. When I visit this URL, it should show a UserPublicProfile component, now its showing 404 page with a not existing page. Also, I have an /app/ page which is then routing to other underlying application components. https://domain/app/ should be not routed as a profile URL, every other URLs after https://domain/ are just profile URLs.
I’m able to make it work by creating an additional page user-profile and then use URLs like https://domain/user-profile/user_name. But I need to have the URL in the form mentioned above.
gatsby-node.js
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^/app/)) {
page.matchPath = "/app/*"
createPage(page)
}
else if (page.path.match(/^/(?!app).*/)) {
page.matchPath = "/:id"
createPage(page)
}
else if (page.path.match(/^/user-profile/)) {
page.matchPath = "/user-profile/:id"
createPage(page)
}}
pages/index.js:
import { Router } from "@reach/router";
<Router basepath="/">
<PrivateRoute path="/user-profile" component={UserPublicProfile} />
<PrivateRoute path="/" component={UserPublicProfile} />
</Router>
Answer
I found a solution by using createPages function in gatsby-node.js.
https://www.gatsbyjs.com/docs/creating-and-modifying-pages/
exports.createPages = async ({ actions: { createPage } }) => {
// get all users to crete them a profile page
axios
.get(process.env.API_DOMAIN + "/getAllUsersPublicProfiles")
.then(result => {
var users = result.data.data;
users.forEach((user) => {
createPage({
path: `/${user.link_tag}/`,
component: require.resolve(
"./src/components/userPublicProfile/userPublicProfile.js"
),
context: { user: user },
});
});
})
.catch((e) => {
console.log("Failed to load users data: " + e);
});
};