我正在使用Reaction路由器,我传递的路径参数有一个“/”,Reaction路由器将其作为单独的路径,并且它没有重定向

bwntbbo3  于 2022-10-15  发布在  React
关注(0)|答案(2)|浏览(186)
<Route exact path="/name/:username" component={Home}/>

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

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

frebpwbc1#

如果要有条件地匹配(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"
qni6mghb

qni6mghb2#

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

const username = "/john-bradley"

相关问题