如果要有条件地匹配(1)单个“用户名”路径段或(2)“名字”段和“姓氏”段的路由路径，则需要为这两个段声明路径匹配器。
示例：

<Route
  exact
  path={["/name/:firstname/:lastname", "/name/:username"]}
  component={Home}
/>

然后正确形成链接目标。
链接到"/name/john/bradly"("/name/:firstname/:lastname")：

const username = "/john/bradley";

链接到"/name/johnBradly"("/name/:username")：

const username = "/johnBradley";

...

<Link to={`name/${username}`}>Click Here </Link>

对于像用户名字段这样的东西，我建议将其作为queryString参数传递，这样您就不需要奇怪的路由路径匹配器了。
示例：

<Route exact path="/name" component={Home}/>

..。

const username = "john bradley";

...

<Link
  to={{
    pathname: 'name',
    search: `?username=${username}`,
  }}
>
  Click Here
</Link>

然后在Home组件中访问location.search对象字符串中的用户名。

const { search } = useLocation();
const searchParams = new URLSearchParams(search);
const username = searchParams.get("username"); // "john bradley"

正常情况下，它会把它作为另一条路线。
如果你坚持用“/”来推进你的名字，最好用“-”来代替它。
I.e

const username = "/john-bradley"