I am using next.js and graphql now.
I need to set the workspace name in url.
localhost/[workspace slug]/memeber
localhost/[workspace slug]/admin
like that
Can you help me?
If you want to implement dynaming routing you can use Next.js built in routing system , for example with last version of next.js you can create a folder inside pages
called workspace
, inside workspace
a folder called [id]
which containes a file ex. [role].js
.
So a route like /workspace/1234/admin
will be automatically matched by the server.
Otherwise you can use a custom server like express and use something like this:
server.get('/:workspaceSlug/admin', (req, res) => {
const { workspaceSlug} = req.params
return app.render(req, res, '/admin', {workspaceSlug})
})
server.get('/:workspaceSlug/member', (req, res) => {
const { workspaceSlug} = req.params
return app.render(req, res, '/member', {workspaceSlug})
})
Inside folder "pages" create a folder called [slug] In that folder create admin.js and member.js. This way you can access localhost/[slug]/member & localhost/[slug]/admin.
pages
|--[slug]
|--admin.js
|--member.js
Inside the page, you can retrieve the value of [slug] by using useRouter
admin.js
import { useRouter } from "next/router";
const Admin = (query) => {
const router = useRouter();
return (
<div>
<h1>Admin</h1>
<p>{router.query.id}</p>
</div>
);
};
export default Admin;
member.js:
import { useRouter } from "next/router";
const Member = (query) => {
const router = useRouter();
return (
<div>
<h1>Member</h1>
<p>{router.query.id}</p>
</div>
);
};
export default Member;
Create a folder named [slug] inside pages, inside that add your files. After that you will be able to use your files for example:
localhost/men/member
localhost/women/member
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.