Welcome to 16892 Developer Community-Open, Learning,Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

如:www.baidu.com/zhangsan,www.baidu.com/liuliu,这样的形式,我知道现在好多网站是使用类似:www.baidu.com/people/zhangsan或www.baidu.com/u/liuliu,但是我觉得好丑,没有上面形式美观,而且github,facebook和twitter都是上面的实现方式,因此想问下大家这种形式如何在react路由中实现


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
225 views
Welcome To Ask or Share your Answers For Others

1 Answer

使用next.js的动态路由就解决了,哈哈,
文件夹目录:pages/[username]就可以了,下面是页面代码,这样就可以获取用户名,并且判断是否有该用户,没有则跳转到404,这就是我想要的,next.js你们值得拥有

import { useRouter } from "next/router";
import DefaultErrorPage from "next/error";

const Settings = () => {
  const router = useRouter();
  const { query } = router;

  if (JSON.stringify(query) != "{}") {
    if (query.username != "zhangwei") {
      return <DefaultErrorPage statusCode={404} ></DefaultErrorPage>;
    } else {
      return <div>{query.username}</div>;
    }
  } else {
    return <>Loading</>;
  }
};

export default Settings;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to 16892 Developer Community-Open, Learning and Share
...