React路由器dom - Link。如何将ID放入链接的路径中
React 路由器的 dom - Link 是 React Router 库中的一个组件，用于在 React 应用中创建导航链接。它可以帮助我们在不刷新整个页面的情况下，实现页面之间的切换和导航。
要将 ID 放入链接的路径中，可以通过在 Link 组件的 to 属性中传递一个包含 ID 的路径字符串来实现。具体步骤如下：
- 首先，确保你已经安装并引入了 React Router 库。
- 在需要使用 Link 组件的地方，导入 Link 组件：
import { Link } from 'react-router-dom';- 在 JSX 中使用 Link 组件，并将包含 ID 的路径字符串作为 to 属性的值传递给 Link 组件：
<Link to={`/path/${id}`}>Link Text</Link>其中，/path/ 是你的目标路径，${id} 是包含 ID 的变量。
这样，当用户点击该链接时，React 路由器会将 ID 放入链接的路径中，并根据路由配置，渲染对应的组件。
关于 React 路由器的 dom - Link 组件的更多信息，你可以参考腾讯云的产品文档： React 路由器 - Link
相关·内容
1回答
这些链接目前在我的导航栏组件中，但我相信我必须在App.js中设置路由器。我确实有联系人，社交和爱好组件，我想用于路由。感谢您的帮助:) < div className='NavBar'> <imgclassName='laptop-logo' alt=&#
浏览 2提问于2020-09-13得票数 0
因此，我在一个用户数组上进行映射，每个用户都有一个唯一的ID。我想为链接创建一个路径，该路径将包含用户的唯一ID，具体取决于所单击的链接。这是我目前所尝试的(由于某些原因，Link不允许我使用模板文字) import React, {useEffect, useState} from 'react';
//import
浏览 37提问于2020-08-27得票数 2
回答已采纳
我无法将react-router-dom链接放入react-google- InfoBox中而不导致整个页面重新加载。下面是我的InfoBox的代码：import { Link} from "reac
浏览 16提问于2018-01-13得票数 1
我正在尝试做一个基本的路由器网站，如下所示。当" to“与当前的url路径匹配时，我想给元素添加一个"selected”类(这样它就可以突出显示活动链接)。我不知道如何将位置放入应用程序道具中，因此我可以使用该位置来更改样式。import React from "react";
import { BrowserRouter as Router, Route, Link<
浏览 16提问于2019-03-13得票数 1
我第一次用的是反应路线。当我尝试这样做的时候，它会给我这个警告和它不起作用的“警告:链接是一个空元素标签，不能有children或者使用props.dangerouslySetInnerHTML。请检查Loginpanel的呈现方法。” <input type="passwo
浏览 4提问于2016-08-06得票数 18
回答已采纳
import { RouterProvider,} from "react-router-dom";
<RouterProvider router={router} />);
浏览 3提问于2022-10-26得票数 0
回答已采纳
1回答
我正在构建一个带有Rails后端和redux前端的音乐流应用程序。从艺术家索引到艺术展的反应路由器链接正在冻结浏览器。import React from 'react';
import { Link } from &
浏览 0提问于2019-04-21得票数 2
当我收到错误时，可以使用React路由器在React中实现https://name.github.io/project上的相对路径。我使用import {withRouter} from 'react-router-dom';和export default withRouter(componentName);将路由道具从路由器转发到目标组件我尝试像这样实现链接： &l
浏览 24提问于2019-03-03得票数 0
回答已采纳
2回答
我收到以下错误消息：index.js:920 Warning: React.createElement: type is invalid -- expected a string (for built-in在我的渲染方法中有这样的内容： <Router> <Route strict path="/" component={Header} />
</div&g
浏览 2提问于2017-07-01得票数 1
回答已采纳
我正在学习react，所以我正在用它开发一个个人博客。此外，我使用了react-route，但我遇到了一个问题，因为我不明白为什么路由不能呈现( route: /articule/:id)。在index.js中定义路由： //it worksconst app = ( <Switch>);
浏览 23提问于2018-12-28得票数 0
我试图建立一个通用的反应应用程序与反应-路由器4.0.0。
我是非常新的反应-路由器和一般<em
浏览 0提问于2017-03-17得票数 1
回答已采纳
当使用React路由器v5时，可以使用获得该路由的路径(模式)。const { path } = useRouteMatch();
React路由器v6提供了一个类似的钩子，；但是这需要接收您想要匹配的模式。通过将当前路径与已知的params组合起来，我将使用React路由器v5钩子来生成路由。例如，如果我在eCommerce应用程序的产品页面上(假设是/en/
浏览 12提问于2022-06-20得票数 3
回答已采纳
1回答
我在这里说的是这个例子：import { BrowserRouter as Router, Route, Link } from "react-router-dom<li key={id}>
<Link to={`${match.url}/${id}`}>{find(id).
浏览 1提问于2019-02-03得票数 3
回答已采纳
2回答
我试图显示我的“家庭”组件在我的反应项目通过反应-路由器-多姆。虽然我把你的语气做对了，我没有编译时错误，但是Home组件没有出现。你有什么主意吗？/Components/Navbar"; BrowserRouter, Routeimport Homefrom "react";
import bann
浏览 16提问于2021-12-12得票数 0
4回答
但是，当我将组件从模块库导入到另一个应用程序时，我会得到一个错误：
create-react-appimport { PrivateRoute } from 'component-library="
浏览 1提问于2019-06-21得票数 12
回答已采纳
我有一个简单的应用程序，它有两个页面:一个用于登录，另一个用于注册。我想让他们彼此有联系。因为我知道React有一个不同的理由，我会撒谎，让有经验的同事对如何做这件事有自己的看法。这是login-view的代码import PropTypes from 'prop-types';
import Buttonimport R
浏览 1提问于2019-12-10得票数 1
回答已采纳
我是新的反应，我正在创建一个组合网页，在其中，我试图连接两个组件与链接组件的反应-路由器-多姆(类似于HTML锚标签中的href )。下面是指向index.js的代码片段，其中指定的路由器路径引用我的项目列表所在的项目组件，以及我添加了一个链接到路由器中路径的主组件
如果我在实现路由器时出错，
浏览 0提问于2020-07-31得票数 1
3回答
<button component={Link} to={"/create"}> </button>
这是我的代码，使一个图标，一个可点击的按钮
浏览 11提问于2022-04-28得票数 0
RouteToComponent.jsximport ReactDOM from 'react-dom';
import RouteToComponents from './BasicJSX/RouteToCompon
浏览 3提问于2020-04-11得票数 1
3回答
我正在建立一个使用react的网站。我有一个url ，它显示了属于id 1实验室的问题列表。this.props.history.push({}) history.goBack();
浏览 1提问于2022-04-29得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
