如何使用react路由器路由到绝对路径？
React 路由器是 React 应用中常用的路由管理工具，它可以帮助我们实现页面之间的跳转和路由控制。要使用 React 路由器路由到绝对路径，可以按照以下步骤进行操作：
- 首先，确保已经安装了 React 路由器库。可以使用以下命令进行安装：
npm install react-router-dom- 在应用的根组件中引入
BrowserRouter组件，并将其包裹在应用的最外层。这样可以确保路由器能够正常工作。示例代码如下：
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
{/* 应用的其他组件 */}
</BrowserRouter>
);
}
export default App;- 在需要跳转到绝对路径的组件中，使用
Link组件或NavLink组件来创建链接。这些组件会生成一个可点击的链接，点击后会触发路由跳转。示例代码如下：
import React from 'react';
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<div>
<Link to="/absolute-path">跳转到绝对路径</Link>
</div>
);
}
export default MyComponent;- 在应用的路由配置文件中，使用
Route组件来定义路由规则。确保在需要匹配绝对路径的路由规则中，设置path属性为绝对路径。示例代码如下：
import React from 'react';
import { Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Route path="/absolute-path" component={AbsoluteComponent} />
{/* 其他路由规则 */}
</BrowserRouter>
);
}
export default App;通过以上步骤，就可以在 React 应用中使用路由器实现绝对路径的跳转了。需要注意的是，绝对路径是相对于应用的根路径而言的，因此在设置绝对路径时要确保路径的正确性。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云服务器（CVM）：提供弹性计算能力，可根据业务需求弹性调整计算资源。了解更多信息，请访问腾讯云服务器产品介绍。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和处理各种类型的文件和数据。了解更多信息，请访问腾讯云对象存储产品介绍。
相关·内容
在react路由器V5中，您可以使用
history.push('/login?redirect=other_page')
将用户重定向到'/login'或'/other_page' (如果已经登录)
反应路由器V6与useNavigate的等价性是什么？
navigate('/login?redirect=other_page')
不像预期的那样工作。
当用户登录时，它返回路径'/login/other_page'而不是'/other_page'。
浏览 1提问于2022-01-18得票数 1
回答已采纳
以下内容不起作用: 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
回答已采纳
全部：
当我在第7课上学习它的官方教程时，我对React路由器非常陌生：
当涉及到路线平行点时，例如：
// index.js
// ...
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
它开始使用绝对路径，我想知道：
1反应如何?路由器决定使用上述路径还是相对路径，仅仅是因为路径以斜杠“/”开头(我发现的一件事是:一旦我在开始时向相对路径添加斜杠，该
浏览 1提问于2016-07-06得票数 6
1回答
我已经用React和React路由器建立了一个项目。总体结构如下：
这是html页面。
<html lang="en">
<head>
<!-- other tags ... -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
这
浏览 5提问于2022-11-22得票数 1
回答已采纳
2回答
Redux提倡使用单一状态的单一存储。但是，使用react路由器，您可以得到多个页面，每个页面都有自己的顶级根组件.
我们应该如何用一个有多个页面的反应路由器应用来连接redux呢？React路由器1.0不再允许您将道具传递到路由，因此使路由器成为包含所有页面状态的顶级组件不再可能，也不可行。
浏览 6提问于2015-10-19得票数 14
回答已采纳
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
回答已采纳
1回答
响应路由器如何连接到路径名
、、、、
我正在使用react路由器中的Link组件，如下所示
<li><Link to={{
pathname: "../photos",
state: {
id: props.id
}
}} className="nav-link active" >photos</Link></li>
我是这样使用Link的，因为我需要将一些数据传递给链接组件。链接组件存在于比当前路由高一级的路由上，因此这两个点和一个斜线../，但是当单击时，我不会被带到当前路由之上的
浏览 2提问于2022-05-01得票数 0
2回答
React路由器中的多个可选参数
、、、、
我使用的是React路由器v5。
我遇到了需要支持以下用例的情况。
我已经获得了通过/project/1234访问的React组件。但是，我还需要通过/project/1234/hello和/project/1234/goodbye.访问这个相同的React组件，所有这三条路由都需要导航到相同的React组件。
下面的代码不起作用，因为据我理解，如果我导航到/project/1234/goodbye，react路由器将把它解释为我将“再见”解释为:hello param的值，所以如果我使用react路由器的useParams()钩子本身以编程方式询问param，我将得到错误的param值。
&
浏览 3提问于2021-03-16得票数 6
回答已采纳
我是新的反应，并正在学习如何正确地使用反应路由器与反应所有的一起。如您所知，React路由器被分为三个包:react路由器、react路由器-dom和react路由器-原生包。因此，在默认情况下，反应路由器和反应路由器都有反应路由器.问题是，反应路由器和本机反应路由器都包括反应路由器，那么为什么要将反应路由器作为单独的包呢？
浏览 5提问于2019-10-27得票数 2
回答已采纳
在使用从post请求返回的数据发出post请求后，我希望导航到react路由。使用最新的react路由器的正确方法是什么？
import {Router} from react-router
.....
.....
fetch(post_request).then(function(response){
return response.json()
}).then(function(response){
this.props.router.push('/new/information/' + response)
})
然而，这会给我一个错误，告诉我路由器没
浏览 5提问于2016-10-10得票数 0
如何在服务器的子目录中配置react-router以使用路由器参数？
文件夹结构：
SERVER (Root)
|
|- Some another site files
|
|- /contabilidade
|
| - react files (command npm run build)
|
|
需要的URL：，其中8是API服务的参数。
当我调用这个URL时，导航器返回错误404。
我的代码：
index.js
ReactDOM.render(
<BrowserRouter basename="/contabilidade">
浏览 15提问于2019-03-25得票数 1
我有一个反应项目，其中包括许多页。
一个页面包含必须加载本地HTML文件的iframe。相反，它加载index.html文件(主页)。
我是使用“反应-路由器-多姆”的路由和链接。
我认为问题是将HTML文件的链接重定向到主页文件。
如果这是问题所在，那么如何在调用所需的HTML文件时禁用对主页的重定向？
编辑：
HTML文件是第三方SDK包的一部分，不能转换为react组件。
浏览 21提问于2022-03-16得票数 0
回答已采纳
1回答
最近，我使用MERN堆栈作为我的web开发堆栈。但是，我不知道如何处理客户端渲染和服务器端渲染。
我有一个网址：，我使用react路由器路由这个网址。它工作得很好。但是当我在浏览器中输入URL并点击enter按钮时，页面显示为404。
我理解的原因是我没有在express.js中设置get请求，然而，我的问题是我应该就这样离开它吗？或者我也应该在express中实现get请求？
浏览 1提问于2017-07-15得票数 0
问题
我们有我们的网站https://website.com，我们正在尝试部署一个反应路由器应用程序到https://website.com/react-app。如果用户首先导航到https://website.com/react-app，然后从那里导航应用程序，则路由工作正常。然而，如果有人直接导航到https://website.com/react-app/home (或通过书签)，他们会得到404，即使/home是我们的路线之一。
我们试过什么
在我们的package.json中，我们有"homepage": "/react-app/"集。使用Browse
浏览 1提问于2021-08-30得票数 0
3回答
我正在迁移一个react应用程序，并试图将它拆分。基本上，我想将一些客户端反应路线重定向到绝对url(或相对的，但至少与服务器往返，在那里进行反向代理)。
请注意，
react路由器3.0.0
react路由器-redux 4.0.7
这个应用程序有以下网址：
=>主页
=>：第一条路线
=>第二条路线
第三条路线 =>
一切都在里面，立刻做出反应。
路由如下所示：
<Provider store={store}>
<Router history={history}>
<Rou
浏览 8提问于2017-12-20得票数 7
回答已采纳
这可能是重复的，但我找不到答案。
当我试图使用params导航到路由器时，我会得到以下错误：Error: Cannot match any routes. URL Segment: 'order/24'。
我的路由器配置是：
const routes: Routes = [
{
path: 'pm', component: PmComponent, canActivateChild: [AuthGuard],
children: [
{path: 'orderlist', component: OrderlistC
浏览 6提问于2017-06-14得票数 0
回答已采纳
我们正在用dotnet编写一个带有Razor视图(纯后端堆栈)的项目。我们的计划是将每个视图移动到React，使用react-router-dom来处理客户机和服务器中的路由。
我们的想法是一页一页地移动，不要做大爆炸，因为这个项目已经在生产中了。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
const history: History = createBrowserHistory({ basen
浏览 0提问于2019-08-08得票数 5
回答已采纳
1回答
我正在创建一个应用程序，需要多层次的嵌套。从3级开始，我的路线没有被认出来。
App JS
const App = () => {
return (
<React.Fragment>
<Router>
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
浏览 3提问于2020-06-13得票数 0
回答已采纳
React路由器过去是静态的，但在版本4中它变成了动态的。这有很多优点，但在某些情况下，您更愿意让React组件独立于路由器。例如，如果您正在升级到React路由器v4，并且不想做太多更改，或者如果您希望保持组件中任何路由器功能的整洁，以提高可重用性。
你怎么做到的？
浏览 3提问于2018-04-25得票数 0
1回答
我正在升级从React路由器v5到v6。当我运行该应用程序时，url中没有基本名称，也没有加载，当我将/config2添加到url时，所有内容都会显示出来。我在v5 BrowserRouter basename螺旋桨上出错了。我正试图用React路由器v6来解决这个问题，但还没有找到解决方案。它在v5上运行得很好。有什么解决办法吗？
Root.tsx
<BrowserRouter basename="/config2">
<IntlProvider
messages={
LanguageOptions.find((option) =&g
浏览 5提问于2022-03-09得票数 2
假设我们有这样的情况：
<Routes>
<Route path="/" element={<Master/>}/>
<Route path="/login" element={<Auth/>}>
<Route path="" element={<AuthInitiate/>}/>
<Route path="callback" element={<AuthCallback/>}/&g
浏览 1提问于2021-11-16得票数 0
在React路由器Dom v5上，我有一个可以使用嵌套元素的工作代码。V5代码是：
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" />
{user && (
<>
<Route path="/movies">
<Home type="movie"
浏览 5提问于2022-05-26得票数 2
回答已采纳
1回答
这在“react路由器-dom”："^5.3.0“中有效。
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Api from "./Api";
const api = new Api();
const App = () => {
return (
...
<Router basename="/my-app">
<Switch>
<Route
浏览 4提问于2022-11-14得票数 0
回答已采纳
2回答
嗨，我使用react路由器v6，我使用NavLink从一个组件导航到另一个组件。我想在NavLink中添加自定义的active类，如何在react路由器v6中实现。我用这个，但没用。
<NavLink className="px-3 py-2 bg-primary" to={"/"} activeClassName="btn-group-active" >
Home
</NavLink >
如何用反应性路由器v6实现上述功能。
我从这个链接中得到了答案。
浏览 11提问于2022-07-11得票数 0
2回答
我遇到了以下情况：
我有一个用3条路由呈现的react路由器包装的react组件：
如果路由与"/about“匹配，则将用户重定向到"/about-new”。
如果匹配路由，则显示关联组件。
如果请求的路由不存在，请将用户重定向到"/404“。
。
我发现，当我点击链接导航到“关于”页面时，路由会改变为/404，而不是"/about-new“，当我单击到不存在的路由的链接时，它将尝试导航到该路径而不是"/404”。
反应路由器的预期行为是什么？我定义组件的方式有问题吗？或者这是一个带有React路由器的bug？
浏览 6提问于2021-08-13得票数 0
我正在尝试使用react路由器和node js服务器来管理react应用程序。
我在react中的路由器：
<BrowserRouter>
<Switch>
<PrivateRoute token={token} Component={Payments} exact path="/payments"/>
<PrivateRoute token={token} Component={User} exact path="/user"/>
浏览 0提问于2018-09-14得票数 6
我试图添加一个嵌套路由，它将与它的父路由一起呈现到我的应用程序中，但是当我添加嵌套路由时，整个文档就消失了。为什么会发生这种情况？我的代码看起来有点像这样：
import React from "react"
import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom"
function Foo(){
return(
<div>
<h1>This is the parent</h1>
<Outlet /&g
浏览 7提问于2022-11-13得票数 1
回答已采纳
1回答
我正在学习如何为我的应用程序使用Next.js/React。我目前正在研究路由问题，我有几个问题。我知道您可以使用React路由器来进行React(我以前使用了vue路由器)。但是，我不知道我是否需要使用带有Next.js的react路由器，如果可以的话，我将如何使用它。我目前正在使用一个页面目录来保存要重定向到的页面。如何在React/Next中重定向到不同的页面？
下面是一些用以下代码实现它的示例代码：
Class Login extends Component {
state = {
user: {},
}
loginUser = (e) => {
浏览 5提问于2021-03-30得票数 4
回答已采纳
我有以下的反应路由器配置
import React from 'react'
import { BrowserRouter, Route } from 'react-router-dom'
<BrowserRouter>
<Route exact path='/sign-in' component={SignIn} />
<Route exact path='/:username' component={Profile} />
</BrowserRouter>
在像/dyl
浏览 4提问于2017-08-28得票数 1
回答已采纳
我的应用程序是ES6反应应用程序与反应路由器。我想将用户重定向到一个小延迟后的另一个页面。这是我的反应组件：
import React from 'react'
import { Navigation } from 'react-router'
export default class Component extends React.Component {
render () {
return (
<div>Component content</div>
)
}
浏览 5提问于2015-11-09得票数 6
回答已采纳
1回答
我正在使用React创建一个Node包。对于组件，我必须使用react路由器。是否可以在组件中使用react路由器，因为我还没有在任何其他公共组件中见过react路由器。
如果不可能，我如何在组件中建立路由机制。我是否需要将其分解为单独的独立组件，它将处理通过主项目的路由。
请帮我找出解决这个问题的方法.
浏览 1提问于2018-03-26得票数 0
从中，参数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
回答已采纳
我目前使用的项目反应路由器-redux，一切都很好，除了我不知道如何访问反应路由器路由器。
@connect((state, props) => {
return {
notification:state.getIn(['_display', 'notification']),
loadingScreen:state.getIn(['_display', 'loadingScreen']),
route:props.lo
浏览 3提问于2016-04-01得票数 0
回答已采纳
3回答
我正在使用React路由器导航到我的react应用程序中的不同页面。在我的页脚中，我有一个指向/about路径的链接。当我单击该链接时，我需要到localhost:3000/约。但是，当我再次单击它时，我需要到localhost:3000/约/约。我怎么才能避免这种情况？以下是我的路线：
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
浏览 1提问于2022-08-16得票数 1
我工作的公司目前正在试验他们的前端的更新版本。其中一项功能是一个独立的React应用程序，它以Rails API为基础。我们希望应用程序的一部分( React部分)使用react路由器而不是rails路由器。
有没有办法让我们能够将react应用程序作为自己的部分嵌入到应用程序中，同时仍然保持会话，并能够使用rails路由器作为rails组件，使用react路由器作为react组件。
浏览 4提问于2017-03-09得票数 0
回答已采纳
我试着从react路由器-dom导入useHistory，但是它一直给我错误的‘’不包含一个名为“useHistory”的导出。
react router的版本是4.3.1，我尝试过更新(万一有更新的版本)，但是每次我执行npm安装react路由器-dom时，它总是只安装4.3.1，它只更新了从4.3.1到5.2.0的路由器，所以我不知道为什么react路由器-dom不更新(如果有更新的版本)。
如果有人知道导入useHistory的另一种方法，或者做一个从任何地方转到上一个URL的后退按钮，我很想知道。
浏览 3提问于2021-03-25得票数 3
回答已采纳
我在使用react路由器v4呈现组件时遇到了问题。这是呈现单个组件的正确方法吗？我正在正确导入所有内容；但是，没有错误可以帮助我检查登录是否正确。我相信我在AppComponent中导入登录组件的方式存在问题。
app.js
ReactDOM.render(
(
<BrowserRouter>
<Route path="/" AppStore={AppStore} render={props => <AppComponent {...props} AppStore={AppStore} />}
浏览 0提问于2017-09-12得票数 0
回答已采纳
2回答
如果单击NavLink，转到/search，搜索将显示
如何在路由器v6中解决这一问题？救命！
function App() {
return (
<div>
<BrowserRouter basename={'/index'}>
<Routes>
<Route path={'/A/*'} element={<Home/>} />
<Route path={'/search/*'} element={&
浏览 7提问于2022-09-02得票数 1
回答已采纳
1回答
我有一个使用React路由器的Express/React应用程序，我不知道如何处理来自React的未指定路由。
我的快速配置调用app.get('/*', handler)，它呈现index.html，从而传递路由责任以作出反应。如何使用React路由器来处理未预先确定的路由。例如，如果我到了myapp.com/test，就会得到以下错误：
"/test“位置与任何路线不匹配
如何配置-路由器以服务404页，或者在未被识别的情况下重定向到默认路由？
浏览 1提问于2016-06-21得票数 1
回答已采纳
1回答
如何在新的react路由器版本6中使用url螺旋桨(和其他道具)并将其传递给元素的组件，就像在呈现方法中所做的那样？
react路由器: V6
<Route path="/dashboard" element={<Dashboard/>}/>
react路由器: V5
<Route exact path="/ds/:id" render={(url) => <Header url={url}/> }/>
浏览 1提问于2022-02-04得票数 0
1回答
我在玩react-router，在使用嵌套路由时遇到了问题。
这是我的父路由器：
<Router>
<div>
<Route exact path="/" component={HomePage} />
<Route path="/account" component={AccountDashboard} />
</div>
</Router>
下面是AccountDashboard内部的路由器
<Router>
<
浏览 0提问于2019-01-16得票数 3
React路由器(使用React路由器-dom) /，/about，/contact
快速路由器/ =>呈现反应构建的index.html
为了防止“无法获得/about，/contact"，我这样编码。
即使是CRA代码也与我的()相同。
但问题是当我想直接获得"“时，它会因为代码而重定向到"”。
我能做什么?
// rendering react
app.get("/", function (req, res) {
res.sendFile(__dirname + "/client/build/index.html");
浏览 2提问于2020-06-18得票数 1
我正在用Django构建一个网站并做出反应，因为Django本身有一个路由系统，我不想放弃它，所以我决定不使用javascript路由库。
我用webpack来捆绑我的文件，但是由于我没有使用react路由器，有很多webpack入口文件，还有很多捆绑的文件(几乎每页一个)，我不确定这是不是‘正确’的方式。
由于每个页面都有一个javascript文件，所以不同页面之间的状态或其他东西并不是共享的，所以每个页面都是相互独立的。我可以有一些‘共享’的东西而不用反应路由器？
我知道Facebook本身和Airbnb也不使用react路由器，那么他们是如何使用react的呢？他们如何处理很多捆绑的文
浏览 3提问于2016-10-06得票数 0
回答已采纳
我对React.js非常陌生。
我试着用反应性路由器构建一个非常简单的应用程序。
当有人点击登录按钮时，它应该路由到组件Inside.js。
import React, { Component } from "react";
import styles from "./welcome.css";
import {Router,browserHistory } from 'react-router';
class Welcome extends Component {
onClick(){
// alert("H
浏览 2提问于2018-05-25得票数 1
回答已采纳
1回答
提交成功后重定向到其他路由
、、、、
我使用redux-form和react-router。Redux-form提供了一个名为onSubmitSuccess的方法，在成功提交后会调用该方法。但是，我不能通过该方法访问路由器。
提交成功后，如何使用react-router重定向到新路由？
浏览 12提问于2016-09-22得票数 1
回答已采纳
下面是我的App.js的代码片段，
return (
<div className="app">
<Router>
{!user ? (
<LoginScreen />
) : (
<Switch>
<Route path='./profile'>
<ProfileScreen />
</Route>
<Route exact path="/"&g
浏览 2提问于2022-01-14得票数 1
我试图找出如何获得我的网页URL更新基于用户导航在我的反应应用程序。我用的是Redux和React路由器。
当用户登陆应用程序时，应用程序通过AJAX从服务器加载数据。让我们说，这是一份动物清单：
dog
cat
fish
pig
cow
我的路由器的结构如下(简化到重要部分)：
<div>
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/animal/:currentAnimal" component={Connecte
浏览 2提问于2016-05-24得票数 0
回答已采纳
1回答
类型记录和反应路由器
、、、
试图站起来和运行的反应-路由器的类型记录。我已经安装了@type/reads路由器，但是我遇到了一个错误，错误是：
@types/react-router/index"' has no exported member 'hashHistory'
我一直在尝试不同版本的路由器和类型。我现在的版本是：
react: 16.3.2
react-router: 4.2.0
@types/react-router: 4.0.23
我看过上的打字项目。index.ds.ts不显示hashHistory正在导出。但是，这里有一个v3文件夹，而其中的index.ds.ts是这
浏览 0提问于2018-04-18得票数 0
回答已采纳
2回答
角标头相对routerLink
、、、、
我试图在Angular6中创建一个全局标题，其中包含一个动态超链接列表，每个页面的超链接是不同的。超链接总是引用一些相对于当前URL的页面。但是路由器链接在全局标头中并不能相对工作。这意味着，当我在应用程序根标题中有一个路由器链接，并且我试图建立相对链接到当前的，懒惰加载模块，该模块目前正在使用，我已经加载了一个菜单。
意思是，如果我在URL上
http://example.com/company/8/employee
全局菜单包含一个超链接。
<a routerLink="./profile">
然后点击那个routerLink，将带我到example.com/p
浏览 1提问于2018-09-10得票数 1
回答已采纳
我正在学习React.js。我使用的是React路由器版本4.3.1和React路由器dom 4.3.1。
下面给出了我当前的应用程序结构。
<React.Fragment>
{/* sidebar component */}
<SideBar store = {Mystore} />
<div className="main-panel">
{/* navbar component */}
<NavBar store = {Mystore}/>
{/* content component */}
&l
浏览 0提问于2018-11-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
