NextJS URL 参数类似于 React-Router

Question

I'm a newbie to NextJS , It looks so good on the first impression. But after giving it a chance I've faced some problems like URL routing with custom params like react-router .

Currently what We can do with NextJS

https://url.com/users?id:123

What We need to have for better URL pattern

https://url.com/users/123

In react-router It has perfect example here https://reacttraining.com/react-router/web/example/url-params

Answer 1

For anyone arriving late to this party, we now have dynamic routing in Next 9.

Which would allow for a url structure to be crafted like this by using the file structure, and without additional packages.

You could create a file pages/user/[id].js

With

import { useRouter } from 'next/router'

const User = () => {
  const router = useRouter()
  const { id } = router.query

  return <p>User: {id}</p>
}

export default User

Answer 2

For older version: < 9.x

You can use next/link 's as feature:

<Link prefetch as={`/product/${slug}`} href={`/product?slug=${slug}`}>

Link on the browser will appear as /product/slug which internally maps to /product?slug=slug

You need to have a custom server for server-side mapping:

server.get("/product/:slug", (req, res) => {
  return app.render(req, res, "/product", { slug: req.params.slug })
})

For 9.x and higher

Next 9.x supports file system based dynamic routing . You don't need a custom server anymore.

Next.js supports creating routes with basic named parameters, a pattern popularized by path-to-regexp (the library that powers Express ).

Creating a page that matches the route /product/:slug can now be achieved by creating a file in your pages directory named: pages/product/[slug].js .

Multiple dynamic URL segments are also supported!

./pages/blog/[blogId]/comments/[commentId].js
./pages/posts/[pid]/index.js

Answer 3

this example will help you define your parameterized, named routes. it uses nest/routes and let you define your custom routes of preference. hope it will help you.

https://github.com/zeit/next.js/tree/master/examples/with-next-routes

Answer 4

First import Router

import Router from 'next/router'

Then if you want to use it in a Link tag

<Link href={{ pathname: '/about', query: { name: 'Sajad' } }}>

If you want to use it in a function or after a callback

Router.push({
    pathname: '/about',
    query: { name: 'Sajad' },
  })

Answer 5

Problem: query Object Always Empty

In recent versions, dynamic routing is fully supported. The docs even show a super simple example of how it works. Sadly, it is all a big lie! For some reason, the docs fail to mention the issue of hydration.

This blog post explains some extra details.

The gist is: in many dynamic rendering scenarios (including the default), during initial render on the client, the page first gets rendered without any parameters (probably due to hydration, based on a static state that cannot take the dynamic path into account). Only the second time, parameters come through.

Solution

Allow your component to "kinda work" even if router.query is empty, eg:

function MyComp() {
  const router = useRouter();
  const { id } = router.query;

  useEffect(() => {
    if (!id) {
      return;  // NOTE: router.query might be empty during initial render
    }

    doSomethingWithData(id);
  }, [...]);

  if (!id) {
    // we are still waiting for dynamic data to be available
    return 'loading...';
  }

  return theActualContent;
}

There even is the crucial Router.isReady field that tells you whether query data is available, but, for some reason, they do not mention it in the Dynamic Routes documentation .

Answer 6

I have been through the same issue, but I found this package, https://github.com/fridays/next-routes

It works almost the same as react-router, I have tried it and it works for me.