可重用的 react-router-dom 链接 hrefs

D.梅西耶

我想将Link to=""href重构到一个单独的文件中,这样我就可以将它们放入任何需要相同链接的页面中。当涉及参数时,找不到如何执行此操作的示例。

我目前能够创建一个包含类似内容的文件 export const urlManagePosts = '/posts/manage'

然后我在一个页面上使用它:

import {urlManagePosts} from '../../routes/posts'
...
<Link to={urlManagePosts}>Manage posts</Link>

这工作正常。但是当我需要将 引入:idurl 时,我找不到有效的格式化方法。我试图<Link to={{urlEditPost}${post.id}}>Edit</Link>在那里urlEditPost = '/posts/edit/'没有成功。

有一个更好的方法吗?

欧丹

如果您的代码看起来与您给出的示例完全一样:

<Link to={{urlEditPost}${post.id}}>Edit</Link>

那么它不起作用,因为{urlEditPost}${post.id}几乎可以肯定是语法错误(您的浏览器的控制台说正在发生什么?)您的道具需要用反引号包裹,以便将两个字符串连接在一起:

<Link to={`${urlEditPost}${post.id}`}>Edit</Link>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在react中如何使用可重用组件作为React Component传递给react-router-dom Component属性?

来自分类Dev

在react中如何使用可重用组件作为React Component传递给react-router-dom Component属性?

来自分类Dev

如何使用React正确设置react-router-dom链接

来自分类Dev

react-router-dom <链接>未更新页面

来自分类Dev

带有react-router-dom链接的SpeedDialAction

来自分类Dev

react-router-dom链接-悬停时隐藏URL

来自分类Dev

如何使用CSS在React Router Dom中选择链接标签?

来自分类Dev

React Router深层链接

来自分类Dev

xpath提取链接或hrefs

来自分类Dev

在react-router-dom链接中传递参数不能正常工作

来自分类Dev

react-router-dom链接无法导航到目标页面的开始

来自分类Dev

使用链接测试React Router

来自分类Dev

设置React Router链接的样式

来自分类Dev

React Router Dom的<Switch>问题

来自分类Dev

React-router链接,传入参数

来自分类Dev

React JS:可重用组件

来自分类Dev

使用React-Router-Dom创建PrivateRoute

来自分类Dev

react-router-dom 元素类型无效

来自分类Dev

React-router-dom 重定向问题

来自分类Dev

ReactJS - 关于 react-router-dom 的问题

来自分类Dev

我在 React 应用程序中遇到了两个 .js 文件的问题!我正在使用 react-router-dom。我的问题是链接标签

来自分类Dev

react-router-dom与react挂钩不起作用

来自分类Dev

React-React Router Dom,hashbang路由解决方案

来自分类Dev

React 替代transitionTo react-router-dom 4.1.1 功能转换

来自分类Dev

在React Native中创建可重用组件?

来自分类Dev

如何制作可重用的React / MobX组件?

来自分类Dev

什么是React JS可重用组件?

来自分类Dev

发送可重用的React组件的Redux操作

来自分类Dev

在 React 中使用 Typescript 使组件可重用

Related 相关文章

  1. 1

    在react中如何使用可重用组件作为React Component传递给react-router-dom Component属性?

  2. 2

    在react中如何使用可重用组件作为React Component传递给react-router-dom Component属性?

  3. 3

    如何使用React正确设置react-router-dom链接

  4. 4

    react-router-dom <链接>未更新页面

  5. 5

    带有react-router-dom链接的SpeedDialAction

  6. 6

    react-router-dom链接-悬停时隐藏URL

  7. 7

    如何使用CSS在React Router Dom中选择链接标签?

  8. 8

    React Router深层链接

  9. 9

    xpath提取链接或hrefs

  10. 10

    在react-router-dom链接中传递参数不能正常工作

  11. 11

    react-router-dom链接无法导航到目标页面的开始

  12. 12

    使用链接测试React Router

  13. 13

    设置React Router链接的样式

  14. 14

    React Router Dom的<Switch>问题

  15. 15

    React-router链接,传入参数

  16. 16

    React JS:可重用组件

  17. 17

    使用React-Router-Dom创建PrivateRoute

  18. 18

    react-router-dom 元素类型无效

  19. 19

    React-router-dom 重定向问题

  20. 20

    ReactJS - 关于 react-router-dom 的问题

  21. 21

    我在 React 应用程序中遇到了两个 .js 文件的问题!我正在使用 react-router-dom。我的问题是链接标签

  22. 22

    react-router-dom与react挂钩不起作用

  23. 23

    React-React Router Dom,hashbang路由解决方案

  24. 24

    React 替代transitionTo react-router-dom 4.1.1 功能转换

  25. 25

    在React Native中创建可重用组件?

  26. 26

    如何制作可重用的React / MobX组件?

  27. 27

    什么是React JS可重用组件?

  28. 28

    发送可重用的React组件的Redux操作

  29. 29

    在 React 中使用 Typescript 使组件可重用

热门标签

归档