我正在使用 React 路由器，我传递的路径参数有一个"/"，反应路由器将其作为单独的路径并且它没有重定向

Question

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

当在其他组件中使用它时，要重定向到此路径，它不是重定向，因为我有"/"在用户名中(即在路由参数中(

const username = "/john/bradley"
<Link to='name/username'>Click Here </Link>

Answer 1

如果您想有条件地匹配一个路由路径，该路径是(1(单个"；用户名"；路径段或(2(；名字"；则分段为"0"；姓氏"；段中，您需要为两者声明路径匹配器。

示例：

<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"

Answer 2

通常它会将其作为另一条路由。

如果你坚持用一个"/"可能最好用"-"相反

即

const username = "/john-bradley"