在onClick函数中传递react路由器路径
在onClick函数中传递React路由器路径是指在React应用中，当用户点击某个元素时，通过onClick事件处理函数来触发路由器的路径跳转。这样可以实现页面的导航和跳转。
React路由器是React官方提供的用于实现前端路由的库，它可以帮助我们管理页面的跳转和URL的变化。在React路由器中，可以通过定义路由规则和对应的组件来实现不同路径下展示不同的页面内容。
要在onClick函数中传递React路由器路径，可以使用React路由器提供的编程式导航方式。具体步骤如下：
- 首先，确保已经安装并引入了React路由器库。可以使用以下命令进行安装：npm install react-router-dom
- 在组件中引入React路由器相关的组件和方法：import { useHistory } from 'react-router-dom';
- 在组件中定义一个onClick事件处理函数，并获取路由器的history对象：const MyComponent = () => { const history = useHistory(); const handleClick = () => { // 在这里进行路由跳转 }; return ( <button onClick={handleClick}>点击跳转</button> ); };
- 在onClick事件处理函数中，使用history对象的push方法来进行路由跳转，传递目标路径作为参数：const handleClick = () => { history.push('/target-path'); };
这样，当用户点击按钮时，就会触发onClick事件处理函数，从而实现React路由器路径的跳转。
React路由器的优势在于它可以帮助我们实现前端路由，将不同路径下的页面内容进行组织和管理，提供良好的用户体验。它适用于各种Web应用程序，特别是单页应用程序（SPA）和复杂的前端应用程序。
腾讯云提供了云服务器、云数据库、云存储等多种产品，可以用于支持React应用的部署和运行。具体推荐的腾讯云产品和产品介绍链接地址可以根据实际需求和项目情况来选择，可以参考腾讯云官方文档或咨询腾讯云的技术支持团队。
相关·内容
在这篇关于的教程中，作者使用了React路由器v2-3，我想使用新的React路由器v4来实现它。因此，我试图更改这个代码，它使用了react路由器v2：
import React from 'react';
import { IndexLink, Link, browserHistory } from 'react-router';
export class Navigation extends React.Component {
logout(e) {
e.preventDefault();
Meteor.logou
浏览 1提问于2017-03-16得票数 0
回答已采纳
如何获取<tr> onClick的值并使用传递到url的值移到下一个视图/组件？例如，用户在/contacts和<tr value="123456"> onClick上，您如何实现/contacts/123456？期望url contacts/:id
react路由器-dom路由
<Route exact path="/contacts" component={Contacts} />
<Route exact path="/contacts/:id" component={ContactDetails}
浏览 5提问于2020-06-26得票数 0
2回答
import { useState } from 'react';
import About from './Container/About';
import Profile from './Container/Profile';
import {BrowserRouter as Router,Route} from 'react-router-dom'
function App() {
const [state,setState] = useState('Data')
return (
浏览 5提问于2022-03-24得票数 1
1回答
我试图在{title}位置显示来自react路由器的支持值，但我不知道是否可能。
如果路由器'/dashboard'，{title} =‘仪表板’，否则如果路由器'/payment'，{title} =‘支付’
class Header extends React.Component {
state = {
title: '',
};
render() {
const { title } = this.state;
return (
<Typography>
{title
浏览 0提问于2018-11-10得票数 0
回答已采纳
1回答
我正在使用"@reach/router": "^1.2.1"，并且在我的App.js文件中，我有一个后备组件可以在我的路由加载时显示出来： <React.Suspense fallback={<MainLandingPageLoadingScreen />}>
<Router>
<MainLandingPage path="/" />
<AnotherLandingPage path="/coolbeans" />
<NotFound
浏览 14提问于2019-05-29得票数 3
从中，参数Component和props来自哪里？
// default behavior
function createElement(Component, props) {
// make sure you pass all the props in!
return <Component {...props} />
}
如果没有React路由器，本地道具就会被传递到如下组件中：
const myProp="prop";
<ExampleComponent myProp={myProp} />
这是如何用React路由器和createEleme
浏览 3提问于2016-12-29得票数 0
回答已采纳
3回答
我使用的反应路由器与反应。我的一些组件定义了子路由，因此我希望传递给它们一个回调，它允许返回到特定的路由/组件。我希望避免将字符串传递到特定的路由(因为在代码中发生路由更改时存在依赖关系)。因此，我更喜欢传递回调，并将其填充到match.url的值中。
但是这是行不通的: match.url不是传递值，而是总是引用当前的路由。
父组件(简化)：
export class ParentComponent extends React.Component {
render() {
const { history, match, contentId } = this.props;
浏览 0提问于2018-05-19得票数 2
回答已采纳
我正在尝试使用react路由器-redux的推方法来导航我的路线。我已经将onClick方法附加到我的链接中。现在，当我点击这个链接时，我应该转到/image。因此，我在onClick方法中加入了推送法。像这样
import { push } from 'react-router-redux'
toImagePage(){
this.setState({activePanel:"image"},()=>{
this.props.toImagePage()
})
push('/ima
浏览 1提问于2018-01-26得票数 0
我使用的是react版本16.4.2和react路由器dom 4.3.1。我在调用history.push方法时得到了这个错误
未能在‘node’上执行'insertBefore‘：要插入新节点的节点不是该节点的子节点。
<tr
key={w._id}
onClick={() => {
this.setState(
{
浏览 4提问于2019-12-16得票数 0
1回答
根据路线对路由器海军做出反应
、、、、
我试图根据我的React中的当前路径来设计一个Navbar链接，如果路径是/create或/add，它应该改变它的样式。以下是到目前为止在标题组件中的内容：
<div
id="createLink"
className={this.state.createClassName}
onClick={() => this.handleModalToggle()}
>
CREATE
</div>
h
浏览 2提问于2020-07-07得票数 3
回答已采纳
1回答
我正在学习使用。
我跟踪了文档，并在顶级HTML元素上设置了另一个设置在我的主路由器文件上。
Main.jsx
import NotificationSystem from 'react-notification-system';
this.state = { _notificationSystem: null };
componentDidMount() {
this.setState({ _notificationSystem: this.refs.notificationSystem });
}
handleNotificationClick(title, me
浏览 0提问于2018-08-28得票数 0
回答已采纳
1回答
同样，我正在呈现一些React组件，它的呈现如下所示：
render(){
let links = [10, 50, 100, 500, 1000].map((num) => {
return(
<Link key={num} onClick={this.showParams.bind(this)} to={`/somePath/${num}`}>{num}</Link>
)
})
return (
<div>{links}</div>
)
}
我在同一个组件中定义了以下函数：
showP
浏览 2提问于2016-11-09得票数 0
回答已采纳
1回答
我试图从YouTube和官方文档中学习一些React基础知识，我在两个视频中遇到了多个不同的路由器。遗憾的是，老师根本没有解释任何事情，我甚至比以前更困惑了。
dr:我真的搞不懂浏览器路由器、“普通”路由器和索引路由器之间的区别。感谢大家的帮助。
浏览 0提问于2017-08-02得票数 19
回答已采纳
2回答
反应路由器和路由不工作，我无法导航到博客页面。App.js -下面的代码片段包含App.js和路由器。由于react的最新版本，我无法使用开关。
import './App.css';
import React,{Component} from 'react';
import { Navbar,Nav,Container,Row,Col,Button } from 'react-bootstrap';
import {Navigation} from './navbar/navbar.js';
import Luckywheel
浏览 7提问于2022-01-21得票数 1
回答已采纳
1回答
我有一个组件，它现在有一个支柱，您可以在其中添加要链接的页面。
这很好，但我想添加一个名为“type”的新道具，这样按钮就可以链接到另一个页面(就像现在一样)，或者执行onclick事件.例如，单击时执行一个函数。
以下是当前代码：
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class Button extends Component {
render() {
return (
<div>
浏览 8提问于2017-04-24得票数 1
回答已采纳
我想为回去做一个按钮，我做了以下工作：
const GoBackBtn = ()=>{
const navigate = useNavigate()
return (<button onClick={()=>navigate(-1)}> {'<='} </button>)
}
但是，这很好，问题是当我第一次访问这个组件所在的网页时，我在根目录中：
问题是当你点击按钮，它把你带出网站的空白页(浏览器主页，如果你使用的铬，首页)。
如果路由器的历史记录中没有项目，我想通过隐藏按钮来防止这一点。
但我怎么能察觉到呢？
React
浏览 5提问于2022-08-30得票数 1
2回答
在以前使用Reach路由器的项目中，我正在设置React路由器。
在此之前，路线看上去是这样的：
import { Router } from '@reach/router';
...
<Router>
{anon ? <AnonHomepage /> : <Homepage />}
<Explore path="explore/:category" />
</Router>
然后，切换到React路由器，我的文件设置如下：
import { BrowserRouter, S
浏览 1提问于2019-07-09得票数 2
回答已采纳
1回答
我在玩react-router，在使用嵌套路由时遇到了问题。
这是我的父路由器：
<Router>
<div>
<Route exact path="/" component={HomePage} />
<Route path="/account" component={AccountDashboard} />
</div>
</Router>
下面是AccountDashboard内部的路由器
<Router>
<
浏览 0提问于2019-01-16得票数 3
2回答
我发现问题是我需要导入名为withRouter的东西，但它与React路由器v6不兼容，所以我需要使用导航转换整个路由器，但我不知道如何从头开始，如果有人能给我一点指导，至少使用路由的动态Id部分，我会非常感激。
我正在用React制作一个基本的Pokedex项目，我遵循这个的几个步骤，但是看起来他使用的一些函数目前不起作用。我的问题是试图创建一个onClick事件，使用他的Id作为参数将我带到某个pokemon页面。这是视频中使用的代码：
const Pokedex = props => {
const {history} = props;
const classes = us
浏览 2提问于2022-09-03得票数 1
回答已采纳
我在URL中有一组动态参数，例如用户区域设置，如下所示：
/en/homepage
在我的路由器配置JSON文件中，我有如下内容：
/:locale/homepage
在React Router中直接替换这些参数的最佳方法是什么？
我想出了这个解决方案，在我看来，它与标准或便携式解决方案相去甚远：
const urlTemplate = '/:language/homepage';
const mappedUrl = pathToRegexp.compile(urlTemplate);
const url = mappedUrl({
'language'
浏览 0提问于2017-12-23得票数 15
1回答
这显示了如何为旧版本的反应路由器。
有没有人知道如何将流量作为支柱传递给您的顶级组件(react路由器1.0.0 )？
我在文档中看到，在react中，路由器1.0.0路由可以被描述为对象，这意味着您可以传递任意的道具。不过，这对我不起作用：
routes =
path: "/"
flux: flux
component: App
childRoutes: [
{path: "/path/to/path", component: Comp, flux: flux}
]
R
浏览 1提问于2015-09-25得票数 0
回答已采纳
我使用的反应路由器与流星和反应。语义-ui。
我想呈现一个徽标( png ) ind菜单/导航条，但是png没有出现，只是一个坏链接图标，如何指定如何在项目/文件系统中内部找到png？
我知道在webpack，你必须要求png文件，但我不知道如何使用流星。
如果我使用外部链接，它可以正常工作。如果我跟着url到png，我就会收到警告。
browser.js:49警告:react路由器位置“/图标/mmlogo.png”与任何路由不匹配。
我的肚脐组件：
import React, { Component } from 'react';
import {Link, Ind
浏览 1提问于2016-10-26得票数 2
回答已采纳
1回答
如何使用Navlink
、、、
我使用Navlink导航新路径，但例如:我的路径是"/home“，当我单击"/news”链接时，我的路径更改为"/home/news“，”我想要这条路径“/新闻/我使用Navlink”react路由器-dom“。
<NavLink
key={getKeyEleman()}
className="navMenuItem"
style={{ color: item.color || "var(--warmGrey)" }}
浏览 1提问于2022-04-04得票数 0
回答已采纳
在React路由器v6中，如何使用<Link>而不是useNavigate()返回到上一页。
// Instead of this...
<button onClick={() => navigate(-1)}>
// ...it needs to be this:
const previousPage = ???
<Link to={previousPage}>Go back</Link>
这种行为更改允许我使用<a href="xxxx">而不是<button>，这是在页面之间创建链接的最容易访
浏览 11提问于2022-06-19得票数 2
5回答
我想在我的组件中启动一个动作。这是一个表示组件，不需要知道redux。路由器实现是使用react路由器-redux完成的。
main.js：
let store = createStore(rootReducer)
const history = syncHistoryWithStore(hashHistory, store)
class RenderClass extends Component {
render() {
return (
<Provider store={store}>
<Router history
浏览 13提问于2016-11-22得票数 7
2回答
我正试图在Reactive路由器中使用Mantine ()，使它只在特定的路由上启用。
如何才能实现这一点。
通常，要将组件显示为以下内容，例如：
<Route element={<SidebarLayout {...{ inactive, setInactive }} />}>
<Route path="/" element={<Main />} />
但是在本例中，我得到了更多的代码(基于docs中的示例)--我计划在这个<AppShell>组件中添加一个组件(请一直往下看)：
&l
浏览 17提问于2022-08-05得票数 1
回答已采纳
React RouterLink不工作。我有一个像profile.js这样的组件，我想通过onclick重定向该组件。所以我尝试了很多方法来实现这一点。我不能把路由器和路由器理解为链路。你能向我推荐一些关于这方面的详细文档吗？
下面是我的代码：
//Nav bar
<Transitions in={open} {...TransitionProps}>
<MainCard>
<CardContent>
<List component="nav" className={classes.navContain
浏览 3提问于2021-09-06得票数 0
我有这个组件，其中我有一个Textfield organizationName供用户输入它的名称。当特定路由匹配时，我将此文本字段包含到路由器以显示。
但是，当我将它包含到这个路由器中时，Textfield只会出错，并允许我在失去焦点后只键入一个字母。然后我不得不一次又一次地打下一个字母。我想这就是我进口这个东西的方式。任何帮助都很重要。
我正在使用material-UI和react-routerv4
const [organizationName, setOrganizationName] = useState('')
const handleChange = (event)
浏览 1提问于2020-04-09得票数 0
回答已采纳
我有一个带有网格的页面，用于显示产品。在我转到产品详细信息页面后，顶部栏上的图标不再加载。为什么会发生这种情况？
这是我的布局组件：
export default class Layout extends React.Component {
render(){
return <div>
<LoadingScreen/>
<AppBar/>
<MyRouter/>
<Footer/>
</
浏览 4提问于2019-11-12得票数 0
回答已采纳
useHistory给出了这个错误：
未能编译./src/pages/UserForm/_UserForm.js试图导入错误：“useHistory”未从“react路由器-dom”导出。此错误发生在构建期间，不能取消。
react路由器-dom版本：
4.3.1
代码：
import React, { useState, Fragment } from 'react';
import FormUserDetails from './FormUserDetails';
import FormPersonalDetails from './
浏览 15提问于2020-07-12得票数 244
回答已采纳
我将REACT路由器DOM从V6升级为V5，我使用了REDUX，并且在COMMON.ACTION中有一个名为CHANGE路由的通用函数，直到现在我使用了HISTORY.PUSH，在更新之后，我需要更改它以使用导航，但是每次更改它时，我都会得到以下错误
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。
现在我知道我违反了钩子规则，但我不知道为什么changeRoute是一个函数，我做错了什么？
谢谢你的帮忙
这是我的应用程序
浏览 2提问于2022-01-06得票数 0
我试图通过上下文传递路由器，以便在子navigateTo上调用React.Component。
目的：
当我成功登录时，我需要远离登录。
策略：
下载路由器到childe登录组件。
成功登录时，调用路由器上的navigateTo('/startpage')。
我在包含运行的页面/组件中有这样的内容：
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
以下上下文设置：
getChildContext() {
retur
浏览 8提问于2015-08-19得票数 2
这周我第一次使用React，我正在尝试创建一个fetch Github应用程序，除了滚动到顶部之外，一切都在工作。当我向下滚动并点击视图Repo时，我希望屏幕自动向上滚动，我已经通过React复制了代码，并且我使用的是React路由器-Dom版本5，但是没有什么是滚动的。请看下面我的代码，我哪里出错了？
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const
浏览 13提问于2022-04-27得票数 -1
1回答
我在一个带有服务器端呈现的react应用程序中使用了react路由器-dom，我正在寻找一种获得类似于document.location.origin的东西的方法，但是除了路径名之外，我什么都找不到。是否有任何方法来获得来源使用反应路由器？或者其他方法？
浏览 2提问于2018-02-09得票数 2
1回答
我用的是电子反应。当我在按钮中使用这样的路由器时，在构建React项目并用电子编译它之后，运行react项目就可以工作了：
const ButtonNo = withRouter(({ history }) => (
<button className="wizardbuttons"
type='button'
onClick={() => { history.push('/Institution') }}
>
Skip Setup
</button>
))
但是，
浏览 0提问于2018-10-15得票数 0
回答已采纳
2回答
我正在尝试添加一个默认页面，用户在打开站点时第一次访问该页面，但它没有呈现默认路由。我怎么才能解决这个问题？响应路由器v6备注:没有路由器工作很好，所以不应该是组件问题
import React, {useState} from 'react';
import './App.css';
import {BrowserRouter as Router, Routes, Route, Switch} from 'react-router-dom';
import AddNote from './components/noteDisplay/a
浏览 6提问于2022-02-05得票数 1
回答已采纳
我有一个问题，下面是我的代码： import React, { Component } from 'react';
import Meteor, {
withTracker,
} from 'react-native-meteor'
import { connect } from 'react-redux';
class CreateCommunityContainer extends React.Component{
static navigationOptions = {
title: 'Community
浏览 18提问于2019-02-12得票数 0
回答已采纳
我正在尝试从子组件访问match道具，但我无法访问，因为我看到它不再受支持。除了这个，还有其他的方法吗?或者有其他的方法，我可以从子组件中访问这些参数，而不需要隧道化或者降级-路由器？
import React from "react";
import './menuItem.style.scss'
import { withRouter } from "react-router";
const MenuItem = ({title, imageUrl,size,linkUrl, match}) => (
// console.l
浏览 4提问于2022-06-23得票数 1
回答已采纳
1回答
我有这样的组件结构：
我需要基于两个不同的路由加载在< OtherComponent>，相应的路由从路由器。
我使用："react-router-dom": "^5.1.2"，并看到了一些关于使用IndexRoute和props.children的帖子，但是IndexRoute无法从react路由器-dom中解决，似乎它在版本5中被删除了。
我的路由器(BrowserRouter)如下所示：
<Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}
浏览 5提问于2019-12-23得票数 1
回答已采纳
据我所知，随着react路由器v6中历史记录的替换，useNavigate()和导航的实现应该实现类似的行为。我如何实现以下类似功能，以实现登录前返回到上一页：
useNavigate ()：
const navigate = useNavigate();
useEffect(() => {
return navigate(-1, { replace: true });
});
导航组件()：
<Navigate to="/home" replace state={{ from: location }} />;
浏览 14提问于2022-09-13得票数 1
回答已采纳
4回答
我使用的是react路由器，这意味着我将路由存储在app.tsx文件中。
我有卡片组件，需要重定向到外部url onClick。
，所以我的问题是如何使用外部url示例重定向卡组件上的onClick：，并将两个查询字符串a=xxx和b=xxx提供给url。
浏览 7提问于2021-04-01得票数 4
回答已采纳
1回答
Reactjs屏幕没有呈现
、、、、
我认为问题是在交换机，在反应-路由器的版本或在路由.只有当我在这个类中创建和应用代码时，启动的屏幕才不会呈现并保持白色。我已经更改了react路由器-dom的版本，但是我不知道是什么。在routes.js:的代码下面。
//react-router-dom version: "^5.3.0"
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Header from './compone
浏览 2提问于2022-02-20得票数 0
下面的React路由代码可能在React路由器v5中工作，但给出了React路由器v6中的以下错误
错误: Player不是<Route>组件。<Routes>的所有组件子组件必须是<Route>或<React.Fragment>
是否有可能更新路由/路由代码以使其在React路由器v6中工作？
function App() {
// Some stuff here...
const { players, offlinePlayers } = usePlayers();
return (
<ThemeProvid
浏览 8提问于2022-03-03得票数 3
回答已采纳
1回答
我似乎不明白为什么我的路由器路由不呈现。我刚开始构建我的应用程序，所以代码不多，我尝试过几种不同的方法，但仍然什么也没有。我现在正在尝试路由的组件中有div，但是里面的文本并没有出现--在我尝试路由之前，当我只有App.js文件中的组件时，它们还在工作。有什么想法吗？
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-
router-dom'
import Main from &#
浏览 2提问于2022-05-19得票数 2
回答已采纳
1回答
反应-打字稿你好世界
、、、
我试着用打字稿来回应世界。下面是我写的代码。当我使用方法1时，此代码工作，但在方法2上抛出错误。
Method 1 - TypeScriptComponent.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import Button from 'react-bootstrap/lib/Button'
interface TypeScriptComponentProps {
}
function handleClick() {
console.log("
浏览 3提问于2017-04-04得票数 5
回答已采纳
我使用的是react路由器v5，对于我的history.push调用之一，它将替换最后一个路径部分。
所以，而不是“/home/菜单/过敏原/新值”
它导航到"/home/menu/newValue“
不管有多少条路，它总是只会取代最后一条？
我所用的只是history.push('modal/selectroute')；
为什么会这样？
示例代码：
import { useHistory } from "react-router-dom";
export const Thing = () => {
const history = useHis
浏览 11提问于2022-07-29得票数 0
回答已采纳
1回答
我试图构建我的主页，但我在我的终端得到以下错误，我的反应页是空白的。对于我修改什么来修正这些错误，有什么建议吗？提前感谢
第4行:8：“购物车”被定义，但从未使用过
第7:27行:定义了“路由器”，但从未使用过
第7:50行：“链接”被定义，但从未使用
第17:8行：“页面”被分配一个值，但从未使用过
第28:9行：“addToCart”被赋值，但从未使用
import React, { useState } from "react";
import "./Homepage.css";
import Shop from "./Shop";
im
浏览 2提问于2022-05-01得票数 0
2回答
这是在React JS中的教程之后。
class Square extends React.Component {
render() {
return (
<button
className="square"
onClick={() => this.props.onClick()}
>
{this.props.value}
</button>
);
}
}
funct
浏览 1提问于2019-04-28得票数 0
var React = require('react'),
ReactDOM = require('react-dom'),
Router = require('react-router').Router,
Route = require('react-router').Route,
SiteLanding = require('./components/landing/SiteLanding'),
KanbanBoard = require('./component
浏览 2提问于2016-02-12得票数 0
回答已采纳
3回答
我一直试图在react项目上使用路由器，但得到了一个错误：
路由只能作为路由元素的子元素使用，而不是直接呈现。请把你的路线包在一条路线上。
守则如下所示
import About from "./container/About";
import Profile from "./container/Profile";
import { useState } from "react";
import {BrowserRouter as Routes,Route} from 'react-router-dom'
function App
浏览 5提问于2022-06-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
