react路由：域名如何实现直接跟用户名

Question

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

Answer 1

使用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;

Answer 2

React-router本身是支持的

<Route path="/users/:id">
// 就会变成 xxx.com/users/1

Answer 3

https://codesandbox.io/s/wond...

动态路由就行