通过链接在React Router中不更改Url
React Router 是一个用于构建单页应用的 React 组件库，它提供了一种在 React 应用中实现路由功能的方式。通过 React Router，我们可以在不刷新页面的情况下，根据用户的操作动态地改变页面的内容。
在 React Router 中，我们可以通过 <Link> 组件来创建链接，它会生成一个 <a> 标签，点击该链接时，React Router 会根据配置的路由规则，渲染对应的组件，并且不会导致页面的刷新。这样可以提升用户体验，使应用更加流畅。
React Router 提供了多种方式来配置路由规则，最常用的是使用 <Route> 组件。通过在 <Route> 组件上指定 path 属性和对应的组件，可以定义不同 URL 路径与组件的映射关系。当用户访问某个 URL 时，React Router 会根据路由规则匹配到对应的组件，并将其渲染到页面上。
除了 <Link> 和 <Route>，React Router 还提供了其他一些组件和功能，例如 <Switch> 组件用于包裹多个 <Route>，确保只有一个路由匹配成功；<Redirect> 组件用于重定向到指定的 URL；<BrowserRouter> 和 <HashRouter> 组件用于指定路由的基准路径等。
React Router 的优势在于它的灵活性和易用性。它可以与 React 应用无缝集成，提供了简洁的 API 和丰富的功能，使得开发者可以轻松地实现复杂的路由逻辑。同时，React Router 也具有良好的社区支持和文档资源，开发者可以方便地获取帮助和学习资料。
在腾讯云的产品中，与 React Router 相关的推荐产品是腾讯云 CDN（内容分发网络）。腾讯云 CDN 可以将静态资源缓存到全球各地的节点上，提供快速的访问速度和稳定的服务质量。对于使用 React Router 的单页应用来说，使用腾讯云 CDN 可以加速页面加载，提升用户体验。
腾讯云 CDN 的产品介绍和详细信息可以在以下链接中找到：
请注意，以上答案仅供参考，具体的技术选型和产品选择应根据实际需求和情况进行评估和决策。
相关·内容
我正在尝试学习react router 4，但遇到了一些问题。我从这里开始遵循的指南，是的，这个例子在我的浏览器中运行得很好。我可以单击链接并在浏览器中显示内容。
但是，如果我在浏览器中键入url而不是单击链接，页面将显示未找到。
发生什么事了呢？React-router只能使用链接而不能输入URL吗？？
浏览 5提问于2017-07-08得票数 0
我正在使用带有TypeScript的react-router v5.1，并具有以下路由配置：
<Router basename="/" hashType="slash">
<Switch>
<Route path="/token/:tokenName">
<TokenPage />
</Route>
</Switch>
</Router>
我尝试使用useParams钩子访问组件中的url参数
浏览 0提问于2019-11-28得票数 44
回答已采纳
我按照正式的docs 为react-router-dom创建了一个路由配置
但是当我试图实现我的代码时，它只呈现我从配置中的第一个路由。
routes.js
import TellerLoginPage from '../TellerLoginPage';
import TellerMenuPage from '../TellerMenuPage';
export const routeConfig = [
{
path: '/teller/login',
exact: true,
component: Teller
浏览 2提问于2020-07-20得票数 0
回答已采纳
我正在使用react路由器来导航。现在我的问题是如何从组件内部更改地址栏中的url？
假设我的url如下：https://websitename/loc/lib/12，并且我有一个下拉列表，其中包含一些数字，当选择这些数字时，它应该更改上面的url，即/lib/...<--之后的数字。
修改它的最好方法是什么？我是否必须将更改推到组件上，直到它到达声明react路由器的页面？或者我应该通过使用window.location.href来更改页面中的direclty？
信息：
React version: 17.0.1
React-router-dom: 4.3.1
Using React
浏览 15提问于2022-02-15得票数 0
React并不是检测url中的最后一个参数何时发生变化。如果我重新加载页面，它就能工作。
我使用的是“react router”："^5.0.1"
“路由器”
<Router>
<PrivateRoute path="/users/:id" exact strict component={User}/>
</Router>
然后。在用户组件中，我有一个用户列表和所选用户的详细信息
class User extends Component {
constructor(props) {
super
浏览 1提问于2019-10-29得票数 3
回答已采纳
我最近开始学习React / Redux，现在我正在尝试构建一个小的单页应用程序。
最近我遇到了一个我不明白也无法解决的问题。
让我给你看看密码：
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute
浏览 2提问于2016-07-08得票数 3
回答已采纳
我已经按照作者的建议加载了客户端库。如果您只想在页面中放置一个<script>标记并完成此操作，则可以使用cdnjs上托管的UMD/global构建。
将ReactRouter加载到窗口对象上。
要渲染路由器、路由或链路，我需要ReactClass。但在这里我被难住了。我使用的是纯JavaScript，所以我想这样做：
var router = React.createElement(ReactRouter.Router, null);
React.render(router, document.getElementById('container'));
但我只是得
浏览 3提问于2015-09-19得票数 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
回答已采纳
你好，出于一些奇怪的原因，我的React UI不会更新。我确信我正确地实现了Router，并且URL实际上更改为路由，但UI不会更新，除非我刷新。我添加了Navigation.JS和App.js，请让我知道到底是怎么回事。
谢谢
Navigation.js
import React from "react";
import {
Link,
BrowserRouter as Router
} from "react-router-dom";
function Navigation(props) {
return ( <
Router
浏览 0提问于2020-04-06得票数 0
import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import icon from '@/assets/images/bg.jpg'
const App = () => {
return (
<Router>
<div>
<img src={icon} alt="logo" /> {/* succes
浏览 1提问于2019-08-27得票数 2
2回答
在我做反应js的时候有个疑问。在下面的代码中，我使用了js和jsx。两人的反应都是一样的。那么我们为什么要特别使用jsx。
当我在网上搜索时，我只能得到js和jsx之间的区别，但我也需要知道jsx是专门为react构建的，还是我们可以在react项目之外运行jsx。
App.js
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Lay
浏览 14提问于2022-05-23得票数 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
回答已采纳
请帮帮忙，我不知道在我的代码中发现了导致react-router-dom无法工作的错误。当我点击任何链接时，URL会改变，但视图不会改变。我已经阅读了40多个帖子并做了研究，但我自己还是找不到自己的错误。 App.js文件 import React, { useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect, Link } from 'react-router-dom';
import Header from '../componen
浏览 35提问于2020-10-04得票数 0
回答已采纳
我正在与你使用React Router时出现的流畅UI导航链接问题作斗争。当你使用导航组件单机版时，一切运行正常。问题是当你试图将它与React Router一起使用时-似乎没有一种适当的方法来修改Nav组件来显示和处理路由器链接。我在Github上的官方Fluent UI存储库上找到了以下线程：
我正在尝试人们在那里提出的不同的解决方案，对我来说都不起作用。每一个都会在编译期间导致某种类型的错误。我最近想使用的解决方案是：
<Nav
onLinkClick={(element, event) => {
event.preventDefault();
浏览 2提问于2020-08-25得票数 0
1回答
嗨，这是我早期的frontend技能。我知道bootstrap正处于从3到4的过渡阶段，我决定遵循最新的版本。我选择了我的包裹的react-bootstrap。如果我做错了，请告诉我。我愿意实践最好的解决方案。
这是我的装置。
package.json
{
"name": "f1",
"version": "0.1.0",
"private": true,
"dependencies": {
"@amcharts/amcharts3-react": "
浏览 2提问于2018-05-30得票数 0
我正在使用React Link在我的表格中添加“编辑学生”页面链接。但是，在没有任何明显错误的情况下，变量不会沿着URL传递。相反，URL将呈现为一个完整的字符串。我目前正在学习React JS。我没有使用过JavaScript，因为我通常编写后端代码，所以，我不知道如何解决这个问题。我试过到处找，但还是找不到答案。 我来自Student.js的代码(参考下面的完整代码)： <Link
to={"edit-student/$id{item.id}"}
className="
浏览 20提问于2021-07-11得票数 0
回答已采纳
所以我只想在主页上隐藏<Header/>。但是我需要它显示在其他页面上--例如，当用户登录时。
我认为这是可能的Routes，两者都有家，但做了不同的事情。
我认为这样做是有可能的：
<Router>
<Switch>
<Route exact path="/">
<Redirect to="/layout1" />
</Route>
<LoginLayoutRo
浏览 6提问于2020-08-05得票数 2
回答已采纳
我试图添加装载指示，而路线正在改变，并有一些问题。
正如我们所描述的一样，我也尝试过类似于，但不知怎么的，加载栏没有出现，尽管在控制台中我可以看到加载和加载的路径。
_app.tsx
import { ThemeProvider } from '@mui/styles'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import 'nprog
浏览 6提问于2021-12-12得票数 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
1回答
以下是四个组成部分：
App.js：
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return <Switch>
<Route path="/about">
<About />
&l
浏览 0提问于2021-10-31得票数 4
回答已采纳
2回答
如何检测Next.js项目的URL散列中的更改？
我不想每次鼻涕虫变的时候都重新加载我的页面。
我不能使用<Link>，因为我所有的数据都来自DB。
示例:单击
http://example/test#url1
至
http://example.com/test#url2
尝试了下面的方法，但这似乎只适用于路径更改。
import React, { useEffect,useState } from 'react';
import { useRouter } from 'next/router'
const test = () => {
浏览 10提问于2021-09-27得票数 13
回答已采纳
我有一个项目，对于这个项目，我有一个登录页面，我想使用"RouteComponentProps"，但是我得到了以下错误：
Module '"react-router-dom"' has no exported member 'RouteComponentProps'.
我试着通过“反应性路由器”导入它，但在我看来：
Module '"react-router"' has no exported member 'RouteComponentProps'.
我怎样才能解决这个问题？
这是
浏览 53提问于2021-12-16得票数 23
回答已采纳
1回答
我试图建立一个同构的应用程序使用快速和反应路由器与数据抓取和第一个渲染服务器端和数据操纵客户端。
我成功地获取了初始数据服务器端并呈现了jsx组件，但是只有当url被直接击中时，它才能工作，而不是下面的链接。事实上，就像我读过的所有例子一样，这个应用程序只有一次服务器呈现，然后一切都发生在客户端。
另外，如果我获取一些数据，呈现一个组件服务器端，然后按照一个链接，这些数据不会为新页面更新。
我不知道我是不是在做一些毫无意义的事？
我想得到的是：
每个页面的预呈现服务器端，无论用户是直接到达还是通过链接到达。
只获取所需的初始数据，与路由对应的组件请求
附加应用对组件的布局(标题、附
浏览 5提问于2015-08-03得票数 0
当我使用react-router更改路由时，是否应该触发componentDidUpdate？我修改了示例代码，但似乎无法使其正常工作。
我让home组件记录了一些文本，但它似乎不能触发。感谢您的帮助，谢谢！
代码：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import {
BrowserRouter as Router,
Route,
浏览 1提问于2017-03-23得票数 27
回答已采纳
2回答
我试图建立与反应路由器和webpack.require.ensure函数加载模块，但方法不呈现组件。
在我的示例中，Button组件默认呈现(在主页上)。当我单击按钮时，路由器将我重定向到/admin url，我可以在我的web控制台中看到require.ensure加载了新的块，但是Label组件没有呈现。
index.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, useRouterHistory, bro
浏览 1提问于2016-10-31得票数 4
回答已采纳
我没有多少运气使用redux版本的redux-路由器。当我将产品添加到购物车时，位置确实会改变，但是页面不会更新。
到目前为止这是我的安排。其他所有功能都与新路由器一起工作，将项添加到购物车中，成功地从REST服务器返回。但是，在操作文件中使用push并不会更新页面。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMidd
浏览 1提问于2017-04-16得票数 3
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
回答已采纳
我正在创建一个博客，以便在GitHub Pages上部署。
问题
创建了my React应用程序，并添加了用于导航的BrowserRouter，在本地主机上一切正常，应用程序成功地部署在GitHub Pages上。
尽管主页可以在GitHub Pages上访问，但如果我单击任何链接，就会出现404错误。问题是BrowserRouter不适用于GitHub页面。
经过一些研究后，我在我的react应用程序中添加了HashRouter，因为没有在GitHub页面上工作。
使用HashRouter再次成功地加载了主页，但是如果我单击链接，这应该可以将我从主页带到博客部分，预期的行为应
浏览 2提问于2020-04-19得票数 2
回答已采纳
1回答
我试图用react路由器实现以下嵌套的urls。我的问题是，Feed组件将GET和POST请求同时发送到错误的url (嵌套在路由器组件中)，如下所示：
ReactDOM.render((
<Router history = { browserHistory }>
<Route component={ NavBar }>
<Route path='/' component={ Feed } url='/api/threads'
浏览 1提问于2016-05-17得票数 1
回答已采纳
我为react-router定义了一些路由。
如果我不指定这些路由，我会在页面加载时收到警告：“警告: react-router Location "/Services”不匹配任何路由“，但我可能会遇到这种情况。
我不能忍受的是，当我在react-router复盖的url上，单击Back按钮返回到未复盖的url时，它不起作用。我只是再次看到这个错误，并且没有再次要求服务器提供未覆盖的url。
你知道如何让react路由器只覆盖部分站点吗？
浏览 0提问于2016-04-19得票数 0
1回答
我有两个组件，App和Dashboard 应用程序组件是主要组件，在应用程序中，有一个切换到仪表板组件我需要嵌套路由，在仪表板组件中，我需要有"/ Dashboard / Blogs“，它切换博客组件在它里面。在这里我分享这两个组件， import React, { Component } from "react";
import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
import Signup from "./pages/Signup";
i
浏览 23提问于2020-07-21得票数 1
回答已采纳
1回答
我正在尝试使用React嵌套路由&这就是我的应用程序的样子
Posts.js (父(复数)组件)，它呈现得很好。
import React from "react";
import { Route } from "react-router-dom";
import Post from "./Post";
import { Link, Switch } from "react-router-dom";
const Posts = ({ match }) => {
return (
<div>
浏览 0提问于2018-10-23得票数 2
回答已采纳
1回答
我从RAPR15.4升级到17.0.2
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.3.0",
我需要重定向到一个URL，但不能让它工作。这就是它过去的工作方式
在我的记录列表中，我有一个函数
renderRedirect = () => {
if (this.props.URL) {
retur
浏览 9提问于2021-12-14得票数 0
回答已采纳
我必须为我的应用程序配置路由。我是在我当地的系统里做的。我使用的包是"react-router": "^4.3.1"、"react-router-dom": "^4.3.1"、"history": "^4.7.2"和"connected-react-router": "^4.3.0"。
当用户导航到http://localhost:xxxx/login时，我希望用户被重定向到http://localhost:xxxx。在prod上的实际场景中，baseUrl应该从wi
浏览 1提问于2018-12-01得票数 0
回答已采纳
我已经安装了React Router并且正在使用browserHistory，但是当我手动输入URL时，我得到的是Cannot GET /:path。
你知道为什么会这样吗？
index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, browserHistory} from 'react-router';
import routes from './config/routes';
ReactDOM.render(&
浏览 4提问于2016-03-10得票数 0
我已将react-router更新为最新版本- 2.4.1
我在我的应用程序中使用hashHistory
import { Router, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
// useRouterHistory creates a composable higher-order function
const appHistory = useRouterHistory(createHashHistory)({ queryKey: f
浏览 5提问于2016-06-02得票数 14
回答已采纳
1回答
更新单个子组件
、、
我在使用Diode 1.0.0和scalajs-Reactive0.11.1。
用例：
具有子组件列表的父组件
子模型片段包含用于异步获取图像的Pot
子组件在挂载时获取图像，Pot为Empty，更新其模型片段。
使用天真的方法，这将导致以下场景(事件的顺序可能不同)：
呈现父级。
呈现子1。
子1分派它的GetImageAction。模型片段Pot被更新为Pending。
模型被更新，导致父模型重新呈现。
所有的孩子都被重新呈现。
儿童2…N仍然有一个Empty Pot，因此它们再次触发它们的GetImageAction。
现
浏览 2提问于2016-08-31得票数 0
我希望我的应用程序从子目录中提供服务，例如localhost:3000/test，以便路径tab1和tab2在localhost:3000/test/tab1和localhost:3000/test/tab2中提供服务
为此，我尝试在React Router中使用basename。
它起作用了。
但是，localhost:3000/tab1也匹配tab1组件，tab2也是如此。
如何防止这种情况发生？
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRo
浏览 1提问于2018-08-18得票数 3
我正在使用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
我正在学习如何从useMatch()中使用"react-router-dom"，我得到了下面的错误，我的网页是空的：
Uncaught TypeError: Cannot read properties of undefined (reading 'path')
at matchPath (index.tsx:1148)
at index.tsx:481
at mountMemo (react-dom.development.js:15846)
at Object.useMemo (react-dom.development.js
浏览 35提问于2021-12-22得票数 2
回答已采纳
我正在使用react路由器5.5.1版本，并试图在我的index.js文件中使用它：
./src/index.js
14:8-21 'react-router' does not contain an export named 'BrowserRouter'
我的index.js中的导入语句
import { render } from 'react-dom';
import { BrowserRouter, Match, Miss } from 'react-router';
浏览 7提问于2018-04-12得票数 9
回答已采纳
1回答
我在这里说的是这个例子：
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const PEEPS = [
{ id: 0, name: "Michelle", friends: [1, 2, 3] },
{ id: 1, name: "Sean", friends: [0, 3] },
{ id: 2, name: "Kim", friends: [0
浏览 1提问于2019-02-03得票数 3
回答已采纳
哈希邦(#！)在使用react-router时会被附加到url。
例如：
示例代码：
import React from 'react';
import { combineReducers, applyMiddleware, compose, createStore } from 'redux';
import { reduxReactRouter, routerStateReducer, ReduxRouter } from 'redux-router';
import { createHistory } from 'history&#
浏览 3提问于2016-01-04得票数 1
当使用webpack + react +react路由器+ es6时
警告:不推荐历史记录pushState；使用push代替
<pre>
import React from 'react';
import ReactDOM from 'react-dom';
import {createHistory} from 'history';
import App from './component/app';
import About from './component/about';
import Con
浏览 1提问于2015-12-07得票数 5
回答已采纳
我对反应的方式有一个问题-路由器构造一个URL。目前，URL给了我这个页面的结构：
根组件：
http://localhost:3000/#/?_k=24zils
接触器组件：
http://localhost:3000/#/contact?_k=v12iev
关于组件的：
http://localhost:3000/#/about?_k=b22bqm
我很想让他们展示一下：
根组件：
http://localhost:3000/#/
接触器组件：
http://localhost:3000/#/contact
关于组件的：
http://localhost:3000/#/about
我读到了
浏览 2提问于2016-01-21得票数 3
我正在尝试以编程方式推送一个URL来使用react-router、redux和connected-react-router进行导航
当点击一个<Link />按钮时，它工作得很好，网址和路线也在改变。
但在使用dispatch(push(url))时，URL只会更改，内容不会更新
我做了一个最小的例子。
任何帮助都会非常感谢，
谢谢
浏览 11提问于2018-10-28得票数 6
我是新来的反应，我不能让我的路线工作。我正在学习文档中的教程，但不知怎么的，它不起作用。assume中的内容没有显示出来，所以我假设BrowserRouter、路由或嵌套存在某种问题，但我真的不知道发生了什么。
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from './App&
浏览 3提问于2022-08-29得票数 2
1回答
不确定这是否是React路由器v4、React阿波罗客户端或我的实现的问题。
但以<ApolloProvider>为顶级专案，即：
const ComponentsWithData = await getDataFromTree(
<ApolloProvider client={apolloClient}>
<StaticRouter location={ctx.request.url} context={route}>
<App />
</StaticRouter>,
</ApolloPro
浏览 2提问于2017-03-28得票数 1
1回答
反应-路由器，内线
、、、
如何制作嵌套路线？
我希望最初的路线是课程/:课程_id？在此之后，当我单击一个节点时，我希望我的url变成course/:course_id?/ node /:node_id。
我使用：“react router”："^4.2.2"
return (
<Router>
<div id="app-main">
<Header />
<Route path="/course/:course_id?" component = {Content}/>
浏览 2提问于2018-05-16得票数 0
我用这个(react-Router2.0)在路由器上设置了browserHistory：
import { browserHistory } from 'react-router'
function requireAuth(nextState, replace) {
if (!services.auth.loggedIn()) {
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname
浏览 2提问于2016-02-21得票数 14
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
