react-router Link更改url，但路由组件未呈现
react-router是一个用于构建单页应用的路由库，它可以让我们在应用中实现页面之间的跳转和导航。在react-router中，可以使用Link组件来更改URL，但是路由组件未呈现的问题可能是由于以下几个原因导致的：
- 未正确配置路由：首先要确保你已经正确配置了路由。在react-router中，需要使用Router组件将应用的根组件包裹起来，并使用Route组件来定义不同URL路径对应的组件。同时，需要使用Switch组件来确保只有一个路由能够匹配。
- Link组件未被正确使用：使用Link组件时，需要通过to属性指定要跳转到的URL路径。确保你正确设置了to属性的值，以及Link组件是否被正确包裹在Router组件内部。
- 路由组件未正确渲染：检查一下你的路由组件是否被正确渲染。在使用react-router时，路由组件会根据URL的路径来选择渲染哪个组件。可能是由于路径的配置问题导致路由组件未正确渲染。
- 组件命名错误：确保你要渲染的路由组件的名称没有错误，以及组件是否存在。如果组件名称错误或者组件不存在，路由组件将无法正确渲染。
对于以上问题，你可以逐一排查，并进行相应的修正。如果需要更深入的帮助，建议查阅官方文档或者相关教程来获取更详细的指导。
在腾讯云的生态系统中，推荐使用Tencent CloudBase进行云原生应用的构建和部署。Tencent CloudBase提供了Serverless框架和云开发能力，可以帮助开发者快速构建和部署应用，并且无需关心服务器和基础设施的管理。你可以通过以下链接了解更多关于Tencent CloudBase的信息：
希望这些信息能对你有所帮助！
相关·内容
Provider> }
ReactDOM.render(<ReduxWrapper />, document.getElementById('root')); 在我的App组件中的一个抽屉菜单组件中，有一个Link组件( react-router-dom包的一部分)，当单击它时，它只会更改URL，但不会触发重新呈现，还会出现一个不同的组件(Terms)。在其中呈现</
浏览 20提问于2020-01-20得票数 1
回答已采纳
状态被提升到主标头组件，而UpperMenu组件只接收事件侦听器和活动链接ID作为支持。import {Link} from 'react-router';
class UpperMenu e
浏览 1提问于2017-11-26得票数 2
回答已采纳
我有一个包含以下代码的高速公路应用程序，我想要做的是呈现一个名为Hello的react组件，请求"/“。在Hello组件中，我使用了两个反应性路由器链接，但这两个链接不呈现href属性。我在这里使用的是反应性路由器2。= require("react-router/lib/Link");
callMe:f
浏览 3提问于2016-03-12得票数 3
1回答
我在用react-router v4。我感到困惑的是，当我单击<Link>组件时，路由会立即更改。在获取数据之前，我希望停留在当前路由上，而不是切换路由，然后获取数据。我发现在react-router v3中有一个onEnter钩子，但是现在在react-router v4中，它被废弃了。那么，在单击<Link>组件之后，在更改路由之前，如
浏览 2提问于2017-08-01得票数 3
回答已采纳
我正在使用反应路由在页面之间导航。具有子链接的导航，父链接1父链接2 a.父链接1/子链接1 b.父链接1/子链接2如何在反应性路由器中实现此导航。
浏览 2提问于2019-02-03得票数 1
2回答
React路由器导航
、、、、
在这里学习React，并尝试让路由正常工作。这是一件非常简单的事情，只是为了了解语法等。当我在地址栏中输入路由1和2时，下面的代码可以工作。但我想建一个导航栏。这与我的路由中的<Link>标签工作得很好，但是假设我想在App.js中添加一个导航，使用相同的链接方法是不起作用的。我尝试添加： <Link to="/route-one">One</Link>
|
浏览 3提问于2016-01-07得票数 0
我有一个非常简单的反应路由器设置，这是不正确的工作。当我导航地址栏更改，但反应路由器从来不更新页面。如果我重新加载页面，正确的路由将在初始加载时呈现。to="/signup"></Link>
单击“注册链接”，URL更改为/signup，但未呈
浏览 0提问于2016-06-01得票数 0
回答已采纳
<Link to="/about">About</Link> 现在我想使用来自React-Bootstrap的导航栏。但是，如果我单击导航栏，我的整个web应用程序都会重新加载，这是我不想要的。basic-navbar-nav" /> <Nav className="mr-auto">
<Nav.<
浏览 15提问于2021-07-06得票数 0
回答已采纳
我正在一个Meteor + React项目中工作，该项目需要使用react-router进行服务器端呈现。当前的react-router版本是v3，我学习了一个关于SSR 的教程。总结的步骤如下：
在教程应用程序中，只有一个初始请求被发送到服务器，从那时起，客户端将接管并处理路由</em
浏览 0提问于2017-04-18得票数 2
2回答
我正在使用React-router，并且我想从一个函数中更改页面。该函数在单击侧边栏中的按钮时被调用。我可以通过将按钮交换到react-router中的Link标签来完成此操作。但是，我希望应用一些样式，然后更改页面以呈现新的组件。所以如何从一个函数中改变页面。
我在react路由器中尝试了history.push和重定向，但都不起作用。
浏览 4提问于2018-07-10得票数 0
我的应用程序没有呈现给定路由的匹配组件。当应用程序在url /加载并单击登录按钮时，url将从/更改为/login。但是，Login组件不呈现。对于当前位于/login的url，Login组件只有在刷新时才会呈现。
我在用"react-router-dom": "^5.1.2"。请告诉我任何可能的解决办法。谢谢。<
浏览 5提问于2021-06-01得票数 1
回答已采纳
2回答
现在我想用链接来分享这个主题，然而当点击任何一个主题时，只有一个元素的html呈现，而url保持不变。所以这就是我想做的-如何在以下代码中使用路由？现在很明显，尽管显示了文章，但页面的链接/ url永远不会改变。然而，这使得分享文章变得困难。因此，我想知道在这种情况下如何应用路由？
浏览 5提问于2018-08-01得票数 1
2回答
单击链接时，url会更改，但除非手动刷新浏览器，否则页面的内容不会更改。为什么会这样呢？我使用React路由器v5。div> );这是我的Home.js return ( <div> Take the quiz
浏览 4提问于2020-10-06得票数 2
回答已采纳
2回答
因此，这里有我的Blogs组件，它从db获取所有博客文章并显示如下所示下面是上面这张图的反应代码import单击标题时，这些详细信息将作为道具传递给另一个名为BlogDetails的组件，并将呈现出来。我陷入困境的部分是使用blogpost id路由到BlogDetails组件。在单击标题时，我是否可以使用“路由”来呈现BlogDetails<em
浏览 1提问于2021-03-27得票数 2
PostList是负责加载帖子列表的组件(在其componentDidMount()中使用fetch )，它本身是组件HomePage的子级。我有另一个导航栏组件NavBar，它有一个<Link>组件(来自react-router-dom)，它指向我的HomePage组件('/')的路由。当我在除“/”之外的任何页面上时，使用链接都很好:路由器挂载HomePage，然后PostList触发compon
浏览 0提问于2017-12-13得票数 4
回答已采纳
操作系统: Windows 10专业版React: 15.5.4这里的问题是什么？我的路由组件(Main
浏览 0提问于2017-06-13得票数 0
3回答
反应-路由器是一个非常糟糕的开端.看似基本的东西不起作用。使用react-路由器2.0.0我的链接组件将URL更新为/about，但我的页面在此之后不会呈现有关组件.入口点jsvar ReactDOM = require('react-dom');v
浏览 0提问于2016-03-05得票数 13
回答已采纳
Grommet Anchor 'tag‘属性类型期望'string'，因此使用react router中的Link创建一个控制台警告。除了警告，一切都很好。代码：...<Anchor key={route.key} tag={Link} to={route.path} children={route.mainMenuLabel}/>
标记{string}这应该与React<em
浏览 5提问于2017-10-17得票数 1
回答已采纳
1回答
我是react的新手，我想知道如何点击链接/按钮来改变页面，我已经尝试过这个npm包：react-router-dom 问题是，当我点击链接时，url条目中的路径改变了，但页面保持不变，以下是登录页面代码/resource/global.json";
<div className<div className="row float
浏览 22提问于2019-10-01得票数 1
回答已采纳
2回答
( <ul> <li><Linkto="quizzes">Quizzes</Link></li> <div className="l
浏览 2提问于2017-07-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
