React Router Link右键单击不起作用
基础概念
React Router 是 React 应用中用于实现路由管理的库。Link 组件是 React Router 提供的一个组件，用于创建导航链接。当用户点击 Link 组件时，它会导航到指定的路由。
问题描述
右键单击 Link 组件不起作用，通常是因为默认情况下，浏览器右键菜单会阻止链接的默认行为。
原因分析
- 浏览器默认行为：浏览器右键菜单会阻止链接的默认行为（即导航）。
- 事件冒泡：右键点击事件可能会被其他事件处理器捕获并阻止冒泡。
解决方案
可以通过以下几种方法解决这个问题：
方法一：使用 onClick 事件
你可以手动处理右键点击事件，并在事件处理器中调用 Link 的 to 属性所指向的路径。
import React from 'react';
import { useHistory } from 'react-router-dom';
const CustomLink = ({ to, children }) => {
const history = useHistory();
const handleClick = (event) => {
if (event.button === 2) { // 右键点击
event.preventDefault();
history.push(to);
}
};
return (
<a href={to} onClick={handleClick}>
{children}
</a>
);
};
export default CustomLink;方法二：使用 onContextMenu 事件
你可以在 Link 组件上添加 onContextMenu 事件处理器，手动处理右键点击事件。
import React from 'react';
import { useHistory } from 'react-router-dom';
const CustomLink = ({ to, children }) => {
const history = useHistory();
const handleContextMenu = (event) => {
event.preventDefault();
history.push(to);
};
return (
<a href={to} onContextMenu={handleContextMenu}>
{children}
</a>
);
};
export default CustomLink;方法三：使用 useNavigate 钩子（React Router v6）
如果你使用的是 React Router v6，可以使用 useNavigate 钩子来处理导航。
import React from 'react';
import { useNavigate } from 'react-router-dom';
const CustomLink = ({ to, children }) => {
const navigate = useNavigate();
const handleContextMenu = (event) => {
event.preventDefault();
navigate(to);
};
return (
<a href={to} onContextMenu={handleContextMenu}>
{children}
</a>
);
};
export default CustomLink;应用场景
这种方法适用于需要在右键点击时进行导航的场景，例如在某些特定的应用中，用户可能希望通过右键点击快速导航到某个页面。
参考链接
通过以上方法，你可以解决 React Router Link 组件右键单击不起作用的问题。
相关·内容
在React中的chrome扩展中，有哪些方法可以在组件之间进行切换？我尝试使用react-router-dom，但它不起作用。预期效果:单击link Details打开组件Details
<Router history={history}>
<Link to="/">Details</Link>
<Route path='/' component={Details}/>
</Router>
谁能给我解释一下如何使用: hash和内存历史？
代码在这里：
class Details exte
浏览 12提问于2019-07-25得票数 0
回答已采纳
1回答
在这里，我想将ShowIt组件作为嵌套路由加载，但它不起作用，我的意思是当我单击链接时，我要去路由它，但是ShowIt组件(hello )没有加载，我真的需要解决这个问题
请帮帮我
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from 'react-router-dom';
const ShowIt = <div>Hello world</div>;
const Links = (
&l
浏览 6提问于2020-10-11得票数 0
回答已采纳
不知道我哪里出了问题，我看了看其他的问题，看起来很相似，但仍然不起作用。
单击home或集合将显示home组件，即使路由发生了更改。我的集合组件只有一个简单的<h1>hello collections</h1>，它永远不会显示。家里总是很流行。
我有我的app.tsx文件：
import React from 'react';
import {Nav} from './layout/header/Nav';
import {Home} from './templates/home/Home';
import {Collec
浏览 1提问于2020-01-28得票数 1
回答已采纳
1回答
我在设置支持当前URL的路由器时遇到问题。因此，该网站不是一个完整的react构建，但它会在特定的路由(http://thesite.com/tv/videos/playlists)上初始化react应用程序。现在，当我使用react-router时，它将URL更改为https://thesite.com/{reactRoute}。 所以我使用了window.location.pathname import * as React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Lin
浏览 655提问于2020-09-02得票数 1
回答已采纳
我对反应是陌生的。我对从外部js文件进行路由有问题。
这是我在top- code er.js中的导航文件代码。
import React from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';
function Header(props) {
return <div>
<ul>
<Router>
<li><Link to="/">Home
浏览 1提问于2020-11-11得票数 0
因此，我已经测试了这个新鲜的原始CRA 5(类型记录)应用程序。在App.tsx中，我刚刚将它的内容替换为：
import { Router, Routes, Route, Link } from "react-router-dom";
import "./App.css";
interface IProps {
appHistory: any;
}
function App(props: IProps) {
const { appHistory } = props;
return (
<div className="Ap
浏览 4提问于2022-04-14得票数 1
回答已采纳
1回答
因此，我在我的基本反应项目中添加了一个导航栏，当屏幕显示为sm时，我想单击折叠以显示导航条，但当我单击按钮时，它无法工作。
此外，我还试图将导航条路由到我的组件之一，但它不起作用
*
import React from 'react';
import './App.css';
import MainComponent from './components/MainComponent';
import {BrowserRouter} from 'react-router-dom';
function App() {
return
浏览 4提问于2021-12-23得票数 1
回答已采纳
2回答
当我多次单击主页链接时，我使用了react 4.3.1，每次单击都会创建一个新的历史项目。每次都会重新呈现主页。现在您的浏览器导航中断了(后退/前进按钮无法按预期工作)。
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Example = () => (
<Router>
<d
浏览 1提问于2019-01-18得票数 3
我有与以下类似的代码：
var browserHistory = ReactRouter.browserHistory;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
class App extends React.Component {
render() {
return (
<div>
<h1>Here is content:</h1>
{this.props
浏览 2提问于2016-02-11得票数 7
回答已采纳
以下内容不起作用: React路由器"Link“不工作。
假设我们处于起点：“localhost:3000/api/page”。
当我单击下拉项目时，链接是：“localhost:3000/api/page/api/page/abc”。
它应该是："localhost:3000/api/pages/abc".
我在控制台中没有显示错误，但是它没有达到所需的行为。它没有重定向到正确的页面。
**当我通过输入URL进入正确的页面时，它是空的。
但是，在测试页面时，当我没有使用任何Reactive路由器路由时，页面运行良好，所以我认为问题在于路由**。
import { L
浏览 2提问于2021-06-07得票数 0
回答已采纳
我第一次尝试使用React-Router，并尝试编写一些代码，但链接似乎不起作用。这些是我的链接。起初，当我把它们放到App-Component中时，这些链接起作用了。然后我试着把导航放到它自己的组件中，然后链接就不起作用了。谢谢你的帮助! import React from "react";
import About from "./About";
import Home from "./Home";
import Navigation from "./Navigation";
import { BrowserRouter a
浏览 13提问于2020-12-17得票数 0
回答已采纳
你好，我正在使用React Router...我有两个组件App.js和SideNavComponent。我想单击SideNavComponent中的链接并转到正确的组件。
现在，当我单击链接时，它会更改URL，但不会呈现正确的组件。但是，如果我自己更改URL，则会呈现正确的视图。
App.js
import React, { Component } from 'react';
import { Col, Well, Panel } from 'react-bootstrap';
import NavbarComponent from './Navba
浏览 2提问于2017-08-05得票数 0
回答已采纳
1回答
我是个新手。我正在学习react-router。我想要做的是让两个组件像这样相互链接： 这是App.js import React from 'react';
import About from './About';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
class App extends React.Component {
render () {
return (
<Router>
浏览 17提问于2021-06-29得票数 1
回答已采纳
我正在尝试使用Material-UI for React，但我不确定重定向到其他页面/组件的正确方式。
我已经阅读了几个网站，了解使用react-router-dom进行重定向的不同方法，但我仍然不明白“最终”的方法。
history.push
其中一种对我不起作用的方法是使用props.history.push('/some-route')。我知道history是未定义的。我也尝试过通过props.history访问它
import React, { Fragment } from 'react';
import { Button } from '@m
浏览 1提问于2019-04-22得票数 6
回答已采纳
我是一个新的用户，当我看到react路由器文档时，我很困惑。
让我看看，
首先，docs：
我简化成这样
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const routes = [
{
path: "/",
component: Sandwiches
},
{
path: "/tacos",
com
浏览 0提问于2020-03-06得票数 0
回答已采纳
我试图在我的reactjs应用程序中使用react路由器。我遇到了这个问题：
这就是我想做的：
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import About from '../Pages/About';
import Home from '../Pages/Home';
import Topics from '../Pages/T
浏览 2提问于2018-10-05得票数 1
1回答
我在用react-router v4。我感到困惑的是，当我单击<Link>组件时，路由会立即更改。在获取数据之前，我希望停留在当前路由上，而不是切换路由，然后获取数据。我发现在react-router v3中有一个onEnter钩子，但是现在在react-router v4中，它被废弃了。那么，在单击<Link>组件之后，在更改路由之前，如何获取数据呢？
示例：
它是:在A ->上，单击<Link> to B ->为B ->呈现B获取数据
否:在A ->上单击<Link> to B -> render Route B
浏览 2提问于2017-08-01得票数 3
回答已采纳
我有一个基于React.js的小工具，我已经嵌入购物网站。它对大多数网站都很有效。 对于一个站点，ajax-cart.js.iquid代码导致react路由器出现问题，页面url发生变化，托管小部件的页面加载该url -导致404。 如何保护React App和Router功能，使其不会被页面js破坏或接管？ 在这里，您可以看到它工作正常。单击右下角的P，然后单击Join。https://www.puctto.me/collections/all 在这里，您可以看到它不工作。单击P。url栏更改，页面导航。https://shoezie.com.au/ 我像这样加载ReactRouter：
浏览 15提问于2021-09-07得票数 1
在我的react应用程序中，我使用路由器组件在单击导航栏时显示不同的组件。但是，当我单击导航栏中的链接时，地址显示路径，但是当路径等于它时调用的组件现在显示在页面中。
这是我的App.js
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, BrowserRouter as Router, Switch } from "react-router-dom";
import NavBar from "./Co
浏览 1提问于2019-09-29得票数 1
回答已采纳
2回答
我正在使用React-router，并且我想从一个函数中更改页面。该函数在单击侧边栏中的按钮时被调用。我可以通过将按钮交换到react-router中的Link标签来完成此操作。但是，我希望应用一些样式，然后更改页面以呈现新的组件。所以如何从一个函数中改变页面。
我在react路由器中尝试了history.push和重定向，但都不起作用。
浏览 4提问于2018-07-10得票数 0
据我所知，单击React路由器的<Link />组件会导致<Router />中的所有内容重新呈现。
然而，在这个简单的示例应用程序中，使用ReactiveR外层DOM v5.2的情况似乎并非如此：
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Foo = () => {
console.log(
浏览 0提问于2020-07-11得票数 1
回答已采纳
2回答
调度函数没有发生任何错误
、、、、
我正在使用react-router和react-router-redux管理我的react-router应用程序路由。
我使用以下配置设置路由器：
import {Provider} from 'react-redux'
import {Router, browserHistory} from 'react-router'
import {createStore, combineReducers} from 'redux'
import {routerReducer} from 'react-router-redux';
impo
浏览 4提问于2016-11-30得票数 0
1回答
我有以下组件..。
import React from 'react';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class Bottom extends React.Component {
constructor(){
super();
this.state = {link:"Don't have an account?"}
}
render(){
浏览 2提问于2016-08-02得票数 0
回答已采纳
我试图导航到链接/login，当我单击实际链接时，我可以在浏览器中看到url更改，但是Login组件没有加载：
// App.tsx
import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Header from './components/Header/Header';
import Login from './components/Login/Login';
const App =
浏览 3提问于2021-08-30得票数 0
回答已采纳
我的链接使用webpack、ES6、react-router库和Link组件。我想要与链接元素的父div“传输”，但是当我单击div时会得到错误：
Uncaught TypeError: Cannot read property 'transitionTo' of undefined
我跟踪了和的帖子。
NavBar.jsx
var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Lin
浏览 2提问于2015-10-30得票数 0
回答已采纳
考虑这个codesandbox示例。 import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Foo = () => {
console.log("rendered");
return null;
};
export default function App() {
return (
<Rout
浏览 33提问于2020-07-11得票数 1
回答已采纳
我对React生态系统很陌生，通过尝试简单的应用程序来学习。在这种情况下，我将尝试路由如何在react应用程序中工作。基本上，我们的想法是：
点击链接(一个反应路由器组件)导航到一个新页面。
成功完成分派的异步操作后，导航到新页面。
这是我的密码
import React from 'react'
import {Link} from 'react-router'
import {routerActions} from 'react-router-redux'
import {connect} from 'react-re
浏览 4提问于2016-06-01得票数 9
当我单击react应用程序的头中的操作时，组件没有挂载，但是URI更改很好。
我在用
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0"
我的代码是
Header.js
import { BrowserRouter as Router, Link } from "react-router-dom";
const Header= () => {
return (
<n
浏览 1提问于2022-04-11得票数 0
回答已采纳
我有一个有几条路线的创建-反应应用程序。当我不时改变分支等时，我注意到路由不起作用。我估计它唯一一次起作用是因为缓存。
下面是我的路由，为了简单起见，我用一个简单的blog标记替换了p路由，因为我开始认为它与我链接的组件有关。
App.tsx
const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
<Switch>
<Route exact path="/" component=
浏览 5提问于2020-12-06得票数 0
回答已采纳
我看过与这个问题有关的各种答案，但这个问题似乎仍然存在。如果有具体的解决方案就好了。
我试图呈现一个导航栏使用react-引导和尝试路由它使用反应路由器。在第一次单击时，它似乎不起作用。当页面被强制加载时，组件将被加载。
这是相关的文件。
MyAppNavbar，js
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Nav, NavDropdown, Navbar, Container, Alert } from &
浏览 1提问于2020-11-21得票数 3
2回答
当我设置并通过路由进行更改时，路由就会继续添加Infront。
示例：-如果我在http://localhost:3001/login页面上，并单击“注册链接”，则在前面添加register路由，如==> http://localhost:3001/login/register
有人能告诉我我做错了什么吗？
码
App.js
import "./App.scss";
import { Routes, Switch, Route } from "react-router-dom";
import Home from "./components/Ho
浏览 4提问于2022-07-02得票数 1
回答已采纳
每当我单击来自DropDown.js的服务按钮时，我都试图从Navbar.js中呈现下拉菜单项。但是，当我单击“服务”按钮时，我得到了一个错误：“您不能在另一个程序中呈现一个。您的应用程序.中不应该有超过一个”。我怎么才能解决这个问题？请帮帮我!非常感谢!
DropDown.js：
import React from "react";
import { serviceDropdown } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom&#
浏览 1提问于2021-12-29得票数 1
我开始在我的代码中使用react路由器，但所有由<Link>甚至<a>标签生成的链接都不起作用。当我将鼠标放在这些链接上时，我可以看到URL，这是正确的，但当我单击它们时，没有任何反应。我的意思是浏览器中的URL不会改变。看起来我用的是e.preventDefault！由于我是新手使用React Router，我想我遗漏了一些东西。 下面是代码的一部分(完整的代码非常长)： index.js： <Router>
...
<Menu />
...
<Switch>
<Route path='/smode
浏览 8提问于2019-03-04得票数 0
2回答
Hi以一种非常基本的方式实现了react-router。
App.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
function App() {
return
浏览 1提问于2020-10-14得票数 0
回答已采纳
您好，我是一个新的reactjs和尝试从一个页面导航到另一个页面点击一个链接使用react路由器。我有一个home.js，其中有一些地名的列表，我想单击其中一个名称，以便它应该移动到其详细信息页面，即about.js。到目前为止，我尝试了下面提到的代码，但它不起作用，通过单击链接我无法导航到关于页面。任何帮助都将不胜感激。
这是我的home.js
import React from 'react';
import data from './data.json';
import {Link, BrowserRouter as Router,Route} fro
浏览 0提问于2017-09-05得票数 0
我知道这里有很多类似的问题，但没有一个能解决我的问题。 下面是我的App.js类： class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<Router>
<Switch>
浏览 16提问于2020-04-03得票数 0
回答已采纳
看似简单的与react-router-dom的集成产生了意想不到的结果。当我点击侧边栏中的链接时，链接组件通过生成url ie正确地工作。localhost:3000/about，但我仍然停留在上一个查看页面。当我单击前进和后退按钮时，Route呈现正确的组件。
我使用的是Webpack的打字稿，但我不认为这会影响任何事情。
"react"："^16.12.0"，
"react-router-dom"："^5.1.2“
//App Component
import * as React from 'react
浏览 4提问于2020-02-19得票数 1
回答已采纳
1回答
我试着用浏览器历史来处理路由问题。从技术上讲，它工作得很好。但我面临的问题是，每次我点击它的时候，都会附加路径，
默认情况下，如果是localhost:portno/postLogin/page1，第二次单击它就会变成localhost:portno/postLogin/postLogin/page2，单击另一个链接就会变成localhost:portno/postLogin/postLogin/postLogin/page3等等。
`var Router = require('react-router').Router;
浏览 0提问于2016-07-20得票数 1
回答已采纳
2回答
React Router更改URL但组件未呈现我已经查找了答案，但这些示例都不起作用当前React Router & React Router DOM版本是5.0.0它仍然是普通的create-react-app
我尝试过使用Switch标签
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from '
浏览 25提问于2019-03-25得票数 1
回答已采纳
我是React的新手，目前我正在构建一个包含多个组件的布局
例如，包含侧栏组件、topbar组件、页脚组件和主要内容组件的主页布局。
当我单击侧栏组件中的链接时，主内容将根据我单击的链接的url进行更改，其他组件在所有页面上都将相同，而不管url。
这是我的代码：
MainLayout.js
import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Sidebar from '../components/Sidebar&#
浏览 1提问于2020-06-30得票数 2
1回答
不能为我的生活得到一个简单的反应-路由器的工作！它显示第一页，但当我单击链接时，它只会将url更改为/home。它一直在播放“应用程序”。为什么主组件没有装载？
简单代码：
import React from 'react';
import { Link } from 'react-router'
import { render } from 'react-dom'
import { Router, Route } from 'react-router'
class App extends React.Component
浏览 2提问于2015-11-12得票数 0
回答已采纳
我正在寻找一种方法，以改变路由在reactJS中使用react-router时，用户点击一个按钮。
下面是我的jsx文件中的相关代码(为简洁起见，省略了组件的详细信息)：
var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory, browserHistory} = require('react-router');
var {Link, IndexLink} = require(
浏览 5提问于2016-04-19得票数 2
我使用react-router-dom进行路由，问题是当单击导航栏元素时，url正在更改，但是属于其他页面的组件不会重命名。这是我的密码：
App.js
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import Header from './common/Header';
import Footer fr
浏览 4提问于2020-01-23得票数 0
回答已采纳
1回答
尝试在我的dash组件中嵌套一个开关，如文档中的所示。
App.js
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
<Router>
<Switch>
<Route exact path='/login' component={Login} />
<PrivateRoute e
浏览 2提问于2021-09-10得票数 0
我的应用程序没有呈现给定路由的匹配组件。当应用程序在url /加载并单击登录按钮时，url将从/更改为/login。但是，Login组件不呈现。对于当前位于/login的url，Login组件只有在刷新时才会呈现。
我在用"react-router-dom": "^5.1.2"。请告诉我任何可能的解决办法。谢谢。
// App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
<Router>
<NavBar
浏览 5提问于2021-06-01得票数 1
回答已采纳
可能是某个地方的小错误。当在导航栏中单击About页面时，我可以从地址栏中看到RouteLink正在工作，但是我的About组件内的p标记的内容没有显示在页面上，尽管代码与其他组件和那些组件是相同的。 从“React”导入react function CV() {
return(
<div id="cv">
<p>adsfadsfasdfa</p>
<br>
</br>
</div>
浏览 32提问于2021-06-16得票数 0
下面的代码将呈现一个我可以单击的链接，当我单击它时，我可以看到URL更改为/japanese_game作为URL path。然而..。页面上似乎没有什么变化，显示“日语”的链接仍然存在，没有变化。它应该显示<Route path="/japanese_game">中的其他内容，或者更确切地说，这是我希望它做的事情。
我做错了什么？
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "re
浏览 1提问于2019-10-11得票数 0
2回答
我有3个主要组成部分。
此组件呈现整个应用程序
import React,{Component} from 'react';
import IndexContent from './components/indexContent';
import IndexHome from './components/IndexHome';
import Root from './components/root';
import {BrowserRouter as Router, Match, Miss} from 'react-r
浏览 1提问于2017-04-05得票数 1
2回答
我试着做一个海军酒吧，但并不是重定向到给定的页面。如果我单击Navbar中的任何链接，它将更改url栏中的路径，但不会重定向到该页面。我不确定我是不是错过了什么。当我用标签代替它时，它工作得很完美。
Navbar.js
import React from "react";
import { BrowserRouter as Router, Link, Switch } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<Switch
浏览 3提问于2020-05-25得票数 0
回答已采纳
1回答
我想要有动态路线的深度链接
我的代码是
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../Routes/Home';
import Add from '../Routes/Add';
import Region from '../Routes/Region';
import Stores from '
浏览 1提问于2020-04-11得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
