如何使用react-router的link组件链接到应用程序外部的URL？
要使用React Router的Link组件链接到应用程序外部的URL，可以按照以下步骤进行操作：
- 首先，安装React Router库。在项目的根目录下执行以下命令：
npm install react-router-dom- 在需要使用Link组件的文件中，引入React和React Router的相关组件：
import React from 'react';
import { Link } from 'react-router-dom';- 使用Link组件创建链接。在需要创建链接的位置，使用Link组件，并通过to属性指定外部URL：
<Link to="https://www.example.com">Go to external website</Link>- 完整的示例代码如下：
import React from 'react';
import { Link } from 'react-router-dom';
function App() {
return (
<div>
<h1>My App</h1>
<Link to="https://www.example.com">Go to external website</Link>
</div>
);
}
export default App;使用以上步骤，你可以在React应用程序中使用Link组件链接到应用程序外部的URL。点击链接后，将会跳转到指定的外部网址。
相关·内容
我正在编写一个应用程序，希望在其中使用react-router包中的Link组件，以便有条件地将用户重定向到另一个页面。如果某些条件不成立，我将to属性设置为空字符串，这样就可以工作，并且不会导致页面重新加载，并且页面会停留在原来的位置。但我想知道这是不是最好的做法？
这是我的解决方案：
import { Link } from 'react-router';
<Link to={condition === true ? '/some/other/url' : ''}>
<div>
my cont
浏览 4提问于2019-08-21得票数 2
1回答
我开发了一个React组件，表示一个允许用户与聊天机器人交互的窗口。当用户单击按钮时，此窗口将打开。现在，我想让这个按钮在我选择的任何站点或应用程序中可用。我想到的第一个想法是将URL关联到这个按钮，这样我就可以在我们的站点或应用程序中通过简单地创建一个链接来调用它，如下所示：
<a href= "url of the button that opens the chatbot window"> Chat with the robot </a>.
我发现这个想法很实用，但我不知道如何将URL与React中的组件相关联。我看了看React-Router的一
浏览 2提问于2018-11-19得票数 0
我使用styled-components设置默认链接的样式，如下所示：
import styled from 'styled-components';
import {
fontSize
} from 'styled-system';
const Link = a `
${fontSize};
color: white;
&:link {
text-decoration: none;
}
`;
export default Link;
我想为react-router的链接组件使用完全相同的样式。我应该从style
浏览 1提问于2018-03-13得票数 0
当我使用react-router 0.13.3时，它是正常的:我正在改变url，并且在不重新加载的情况下进行转换。
现在，在react-router2.0中，如果我手动更改url，我的应用程序将完全重新加载，而不是简单的重定向。我该如何修复它？
我想使用这个：
<a href="/routename">link</a>
取而代之的是：
<Link to="/routename">link</Link>
在少数特殊情况下。
路线
import {Router, Route, IndexRoute} from "
浏览 1提问于2016-04-26得票数 19
我正在一个Meteor + React项目中工作，该项目需要使用react-router进行服务器端呈现。当前的react-router版本是v3，我学习了一个关于SSR 的教程。总结的步骤如下：
创建一个公共路由文件
将路由文件包括在客户端路由器中。
// index.js
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
// import ro
浏览 0提问于2017-04-18得票数 2
1回答
新的反应，并遇到困难，试图创建一个持久的导航跨越我的应用程序使用React -路由器。
使用create-react-app和"react-router": "^3.0.2"
我只想在页面的顶部有几个链接。我一直收到的错误是Uncaught Error: <Link>s rendered outside of a router context cannot navigate.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
i
浏览 4提问于2017-02-23得票数 0
回答已采纳
我正在使用webpack@2和React-Router@4构建一个React应用程序。在开发模式下一切正常，但对于生产模式，我想使用服务器端渲染，这会导致错误：
TypeError: Cannot read property 'pathname' of null
at isActive (/react-app/node_modules/react-router/Link.js:120:46)
at Object.children (/react-app/node_modules/react-router/Link.js:80:24)
at Subscri
浏览 0提问于2017-01-29得票数 0
我对react-router有个问题。这是我的/home组件，登录后看到的第一个页面： return(
<>
<CustomNavbar />
<Container fluid>
{ loading ? (
<div>Loading...</div>
) : (
<Router>
<ProtectedRoute
path='/home/mem'
浏览 15提问于2020-04-30得票数 0
回答已采纳
背景：
我正试图在我的嵌入式Shopify应用程序中创建一些链接。
我知道我不能使用简单的<a>标记，因为Shopify嵌入式应用程序被呈现为iframes。
我在这个教程上取得了一些进展，但是我被困住了：
我想做的事：
我有3页(index.js、dashboard.js和support.js)。我希望允许用户从一个页面导航到另一个页面(有链接和/或按钮)。
我的代码：
通过遵循上面的教程，我已经做到了以下几点：
// index.js
import { Page, Frame } from "@shopify/polaris";
const Index = (
浏览 3提问于2021-04-08得票数 3
import React, { PropTypes } from 'react';
import { Link, browserHistory } from 'react-router';
class Chatbox extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount() {
}
render() {
return (
<div className="cont
浏览 0提问于2018-04-10得票数 0
我有一个带有react-router链接的侧边栏。其中一个按钮的用途是将已登录的用户重定向到其个人资料页面，其url类似于/ user /:user_id
我为这个链接定义了一些逻辑，它在几乎所有的情况下都工作得很好，没有任何问题。它看起来是这样的：
export class SideBar extends React.Component {
// ... some omitted code here ...
getProfileUrlString() {
/* Function for 'to' attribute of profile Lin
浏览 0提问于2016-12-01得票数 0
我正在使用React构建一个单页面web应用程序。对于这个应用程序，我想防止URL改变，也避免使用href链接来防止“链接预览”出现在浏览器的左下角。
为了解决前半部分的问题，我发现在应用程序中导航时，从react-router使用MemoryRouter会阻止URL更改。
以下是路由器的PoC：
import App from './stuff/main/App';
import {Route, MemoryRouter} from "react-router";
import default_page from "./stuff/pages/defa
浏览 1提问于2017-07-16得票数 6
回答已采纳
也许我对react-router的理解不正确，或者我的逻辑是错误的，或者我错过了关键的部分。
from App.js
function App() {
return (
<>
<Router>
<Switch>
<Header/>
<Route path='/' exact component={Home} />
<Route path='/about' ex
浏览 2提问于2019-12-11得票数 0
4回答
我目前正在学习react路由器，然后尝试在一个示例应用程序中实现它。
这是我的代码：
index.html
<!DOCTYPE html>
<html>
<head>
<title>Sample APP</title>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div id="main"
浏览 9提问于2015-11-24得票数 11
回答已采纳
3回答
反应-路由器是一个非常糟糕的开端.看似基本的东西不起作用。使用react-路由器2.0.0我的链接组件将URL更新为/about，但我的页面在此之后不会呈现有关组件.
入口点js
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = requi
浏览 0提问于2016-03-05得票数 13
回答已采纳
1回答
我是第一次接触Laravel和ReactJS，正在尝试实现CRUD操作，我正在尝试显示表中的4行，但能够将记录插入到表中，但不能读取。任何帮助都是非常感谢的。Laravel Framework 7.10.3 PHP 7.4.5 Composer version 1.10.6 Mysql，以下是代码细节
DisplayProduct.js
import React, {Component} from 'react';
import axios from 'axios';
import { Link } from 'react-router';
im
浏览 2提问于2020-05-30得票数 3
我想做一个按钮来链接到一个不同的应用程序与反应库。我的代码如下所示
import React, { Component } from "react";
import { Link, NavLink, Redirect } from "react-router-dom";
import "./subportfolio.scss";
import Coffee1 from "../../assets/coffee-1.jpg";
import Coffee2 from "../../assets/coffee-2.jpg&#
浏览 0提问于2020-03-29得票数 0
我似乎找不到如何在不使用<Link/>的情况下使用react-router更新查询参数。hashHistory.push(url)似乎没有注册查询参数，而且似乎不能将查询对象或任何东西作为第二个参数进行传递。
如何在不使用<Link>的情况下在react-router中将url从/shop/Clothes/dresses更改为/shop/Clothes/dresses?color=blue？
onChange函数真的是监听查询更改的唯一方法吗？为什么查询更改不能自动检测和响应--以参数更改的方式？
浏览 107提问于2016-10-21得票数 185
回答已采纳
1回答
我是新的反应和做一些样例应用程序。我正在查看"react-router“上的概念，并介绍了一个例子。
AppHeader.jsx
import React from 'react';
import Router from 'react-router';
import { Link, Route, RouteHandler } from 'react-router';
class AppHeader extends React.Component{
render(){
return (
浏览 2提问于2017-01-30得票数 1
1回答
我是Redux的新人。现在我试着使用redux反应路由器，但我有问题了。我点击链接，什么也没发生。我的应用程序不呈现组件，也不更改URL。
我有以下代码的app.js文件：
import '../stylesheets/main.scss';
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { combineReducers, createStore } fr
浏览 2提问于2016-02-22得票数 5
回答已采纳
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
回答已采纳
我有一个反应应用程序，其中有许多组件导入相同的模块。webpack是否为请求每个模块的每个文件导入一次，从而导致重复代码(在本例中，每个模块只为两个组件导入两次)？我正在考虑重写组件，这样子组件就不需要React模块了，但也许我正在解决一个不存在的问题。如果相同的react模块会导致重复的代码，我希望避免多次导入。
组件1
import React from "react";
import { Link } from "react-router";
import ReactLogo from "elements/ReactLogo";
expo
浏览 3提问于2015-10-24得票数 23
回答已采纳
我的应用程序没有呈现给定路由的匹配组件。当应用程序在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
回答已采纳
1回答
我目前正在构建我的第一个app应用程序使用router和反应性路由器，因为我想开发一个单一的页面应用程序。我只是用react路由器做了第一个例子，并试图在两条路由之间切换，但是我无法让它工作。目标是拥有一个非常简单的html页面，其中包含一个链接列表，并在视图之间使用swicht。
当呈现index.html时，我看到了链接列表，但是当我单击链接时，我看到url路径正在改变，但是页面的内容没有变化，难道不应该反应-路由器js应该处理这个问题吗？我遗漏了什么？
守则如下：
我的index.html：
<!DOCTYPE html>
<html>
<head lang
浏览 5提问于2015-11-21得票数 0
回答已采纳
在我的react应用程序中构建Tabs期间，我遇到了一个错误
warning.js:33 Warning: Failed context type: The context
`router.history` is marked as required in `Link`, but
its value is `undefined`.
in Link (created by ChatIndexContainer)
in li (created by ChatIndexContainer)
in ul (created by ChatIndexContainer)
in div (c
浏览 0提问于2018-10-07得票数 0
我的代码运行良好，直到我尝试将“链接到”组件添加到我的导航中，而不是硬编码的锚元素。
我的控制台返回以下错误：
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).Uncaught
Error: Invariant Violation: Element type is invalid: expected a
浏览 6提问于2016-01-02得票数 0
回答已采纳
1回答
我正在尝试测试一个反应性组件，下面是测试
jest.dontMock('../js/components/Navigation.js');
var React = require('react/addons');
var Navigation = require('../js/components/Navigation.js');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var L
浏览 3提问于2016-06-08得票数 0
回答已采纳
1回答
ReactJS测试的玩笑
、、、
我对我的React组件进行了以下测试
var React = require('react/addons');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
TestUtils = React.addons.TestUtils;
describe('Navigation', function() {
v
浏览 2提问于2016-06-08得票数 0
回答已采纳
我在我的应用程序中使用了react路由器，我正在寻找一种方法来阻止已经在DOM中的组件的重装。例如，如果我在URL dashboard，那么我将安装一个相关的DashboardComponent。当我转换到dashboard/settings时，我的DashboardComponent和SettingsComponent被重新装入DOM中。我想找到一种干净的方式，只挂载当前URL的子地址。这个可以定位吗？
路由器：
import { Component, createFactory, PropTypes } from 'react'
import { Route, RouteH
浏览 0提问于2015-08-04得票数 11
回答已采纳
我正在使用webpack-dev-server在localhost:1111上本地托管一个存储库。我们已经设置了Jenkins，这样在任何分支上推送到这个存储库都可以在像jenkins.example.com/repo/branch/这样的url上看到。我现在正在尝试使用react-router设置路由
import { Router, Route, Link } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";
const hist
浏览 0提问于2017-09-13得票数 0
我是个有反应的人，我被弄糊涂了。
这里是我想要实现的目标：
/myapp/#/
全球导航，链接到/myapp/#/和/myapp/#/产品
/myapp/#/产品
全球导航(如上文)
从axios检索的产品列表获取XHR请求。每个产品链接到/myapp/#/products/{productId}
/myapp/#/products/{productId}
全球导航(如上文)
产品清单(如上)
产品详细信息面板，该面板显示从另一个axios检索到的其他详细信息，获取XHR请求。
用户应该能够单击列表中的产品来查看inset产品详细信息面板中的详细
浏览 3提问于2016-12-29得票数 1
回答已采纳
1回答
设置错误反应-路由器
、、、
所以我在建立反应路由器时遇到了很多麻烦。我已经看过多个教程和指南，以及文档，我只是说不出什么不对，我真的很感激任何帮助。
这里有一个指向我在github上的项目的链接，如果您想查看更多的代码，但是我认为大多数的反应性路由器代码都是在那里注释的：。
edit im updating snippet here
////my Render
var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').
浏览 3提问于2015-11-01得票数 0
回答已采纳
我已经安装了应用程序，就像在文档中一样：
第一步
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
...
const history = createBrowserHistory()
const store = createS
浏览 0提问于2018-08-17得票数 5
回答已采纳
如何填充上下文，以便在react-router中使用标记时不会未定义历史记录？
我收到的错误是:未捕获TypeError:无法读取未定义的属性'pushState‘
在第1行的函数Link.handleClick上：
if (allowTransition) this.context.history.pushState(this.props.state, this.props.to, this.props.query);
我使用的是react-router 1.0.0-rc1。
顶级路由运行良好。我转到我的主组件，它显示了一个指向“注册”的链接。这个链接应该会将我带到子组件。
我的示例
浏览 3提问于2015-11-01得票数 3
我是新来的。
我试图在我的反应应用程序中实现这一点。
现在，我不希望它像示例那样显示在我的主页上，而是在导航到该组件时显示在我的"MyStories“组件中。但我好像做错了什么，现在我收到了这个错误。
Uncaught : MyStories.render()：必须返回有效的React元素(或null)。您可能已返回未定义的数组或其他无效对象。
这是我的密码。
import React from 'react';
import { Router, Route, browserHistory } from 'react-router';
import La
浏览 2提问于2017-05-02得票数 1
回答已采纳
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
我试图建立我的第一个反应项目，目前正在设置一个汉堡导航按钮，和一个菜单显示时，点击导航。
我把它分成两个部分:汉堡和MenuOverlay。两者的代码如下所示。
目前，我有一个关于汉堡的onClick，在上面切换一个类，但是我如何从那个点击中切换菜单？它隐藏在显示中:无；默认情况下。可能是一个非常基本的问题，所以道歉
MenuOverlay
import React from 'react';
import { Link } from 'react-router';
const MenuOverlay = () => {
return (
浏览 2提问于2017-01-26得票数 7
回答已采纳
2回答
我刚刚开始使用ReactJS，并尝试了我的第一个ReactJS应用程序。
我想添加一个导航，如下所示
import React, { Component } from 'react';
import {Link} from 'react-router';
class App extends Component{
render(){
return(
<div className="App">
Hello
<Link to="/category">Categ
浏览 4提问于2020-08-08得票数 0
回答已采纳
1回答
我是新手，我试着做一个简单的练习，展示一个艺术家列表，每个项目链接到艺术家的页面，其中包含艺术家的专辑，每个人都链接到包含歌曲列表的相册页面。
我在路由方面有问题，我设法从艺术家的名字链接到它的页面，但是如果我点击相册，我看到url改变了，但内容保持不变。
我的档案：
app.jsx：
import React from 'react'
import { Link } from 'react-router';
export default class App extends React.Component {
render () {
return
浏览 1提问于2016-04-22得票数 0
回答已采纳
2回答
我正在使用react-router在我的应用程序中的组件之间进行路由。如何在应用程序之外创建登录页面的路线？例如，用户登陆页面，LandingPage路由到应用程序，然后应用程序可以相应地路由导航栏中的组件/视图。
我遇到的问题是导航栏也一直填充在登录页面中。
以下是路由：
// React
var React = require("react");
var Router = require("react-router");
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
v
浏览 2提问于2015-06-28得票数 0
我正在使用React & Redux构建一个多语言应用程序，使用：
{
"react": "16.2.0",
"redux": "3.7.2",
"react-redux": "^5.0.6",
"react-router-redux": "^5.0.0-alpha.9",
"react-router": "^4.2.0",
"react-redux-i18n":
浏览 10提问于2018-02-01得票数 2
回答已采纳
1回答
我在访问使用react-router的render方法呈现的有状态组件中的url参数时遇到问题。我已经读到，如果我想通过react-router将道具传递到一个组件中，最好的方法是使用render函数。 下面是我的带有Link和Route的App组件 import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import StatefulComponent
浏览 9提问于2019-07-04得票数 0
我似乎在任何地方都找不到这个问题的直接答案。
环境是React、Redux和React-Router。
一个<Link>将点击到一个没有问题的组件并将其全部呈现出来。
使用this.context.router.push(url)会导致相同的组件出错，并且不会呈现任何内容，但会更新浏览器历史记录和url。
新组件有一个mapStateToProps函数和一个导出连接声明，如下所示：
export default connect(mapStateToProps, { fetchData, fetchOtherData })(ComponentName)
在使用router.push时
浏览 0提问于2016-08-19得票数 0
如何调整标题徽标的大小以适合使用bootstrap meteor react？我不能让工作。
带有导航头的MainLayout.js当前如下所示：
import React from 'react';
import { Route, RouteHandler, Link } from 'react-router';
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
import { LinkContainer } from
浏览 13提问于2017-01-20得票数 2
快速问答。有人知道如何为react-router <Link>组件构造对单击/事件处理程序的调用吗？如果我在searchData中返回此API数据并在值上进行映射，那么如何调用事件处理程序并将{key}和{v}传递给单击处理程序？ <Link to={`${key}/${v}`}><li>{v}</li></Link>))
浏览 18提问于2021-05-07得票数 0
在我的react应用程序中，使用react路由器v6，我动态地检索链接，这些链接可以是一个常规的外部url (如)，也可以是对应于带有react-router的路由的内部路径(如"/my-page")。
到目前为止，当我使用react-router-dom的<Link>组件时，我只能让它与内部路径一起工作，而不能使用外部url。就我所理解的文档而言，我无法找到一种方法来实现这一点，至少使用v6是不行的。
因此，到目前为止，我想出的最好的方法是编写自己的MyLink组件，根据href是外部还是不对外呈现<a>或<Link>：
function
浏览 2提问于2022-05-02得票数 1
回答已采纳
在react-router版本4中，如何在url中传递参数，在旧版本中我使用的是this.props.params。但是它在这个版本中是不存在的，所以请帮助我。我正往这方向发送辅助人员
<Link to={"/dashboard/viewProfile/"+id+"/"+type}>View Profile</Link>
以及在路由中
<Route path="/dashboard/viewProfile/:id/:type" render={() => <ViewProfile />} />
浏览 0提问于2018-01-16得票数 0
我正在使用Rails，在资产内部使用Rails和react router.js。我用webpack是为了使用要求
我在app.js里有我的路线：
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var Link = require('react-router').Link;
var ReactDOM = require('react-dom');
var browserHistory = require(
浏览 3提问于2016-02-13得票数 0
16回答
使用建议的方法：，
我想知道是否有一种方法可以使用react将Link元素从'react-router'包装到HTML标记中。
我现在有Link组件可以在我的应用程序中导航页面，但是我想将该功能映射到我的HTML按钮中。
浏览 12提问于2017-02-26得票数 163
回答已采纳
2回答
这是我的代码截图
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import $ from "min-jquery";
import axios from "axios";
import { render } from 'react-dom'
import WeatherEng from './weatherEng'
import WeatherAr from './weatherAr'
浏览 7提问于2017-02-02得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
