如何防止react-router链接指向新视图的中间？
要防止react-router链接指向新视图的中间，可以使用以下方法：
- 使用exact属性：在Route组件中，可以添加exact属性来确保只有当路径完全匹配时才渲染组件。例如：
<Route exact path="/home" component={Home} />这样，只有当路径为"/home"时才会渲染Home组件，防止其他路径的链接指向新视图。
- 使用Switch组件：Switch组件用于包裹Route组件，它只渲染第一个与当前路径匹配的组件。因此，将需要精确匹配的路径放在前面，其他路径放在后面。例如：
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>这样，只有当路径为"/home"、"/about"或"/contact"时才会渲染对应的组件，防止其他路径的链接指向新视图。
- 使用Redirect组件：Redirect组件用于重定向到指定路径。可以将需要重定向的路径配置在Switch组件的最后一个Route组件之后。例如：
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Redirect to="/home" />
</Switch>这样，如果路径不匹配任何Route组件，就会重定向到"/home"路径。
以上是防止react-router链接指向新视图的几种常用方法。在实际开发中，可以根据具体需求选择适合的方法来确保链接的准确性和安全性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain
相关·内容
1回答
我在几个不同的网站上见过这样的事情，但我不知道如何才能做出最好的反应。
我有一个表单，它有一些验证，但我希望防止用户重定向到表单的另一个路径有验证错误。
FormComponent.js
import React, { useState, useEffect, useRef } from "react";
import Form from "./Form";
import TextInput from "./TextInput";
import * as Yup from "yup";
const FormComponent =
浏览 0提问于2021-03-05得票数 0
1回答
我正在尝试集成到我的应用程序，这是在zend编写的柑橘支付网关。我使用的是橘子旅馆的结账服务。我在控制器中生成签名，然后将这些值传递给视图，查看表单是在哪里创建的。控制器代码：
$formPostUrl = "https://sandbox.citruspay.com/sslperf/your-vanityUrlPart";
$secret_key = "xxxxxx"; // your secret key
$vanityUrl = "xxx"; // your vanity url
$merchantTxnId = uniqid();
浏览 2提问于2016-04-29得票数 1
我希望将react-router配置为在呈现任何路由之前等待Firebase登录(或注销)。
我已经看到react-router有一个onEnter()钩子，但这似乎是一个即时回调，我还没有完全弄清楚如何让react-router等待直到firebase触发firebase.auth().onAuthStateChanged(...)事件。
react-router是否包括一些处理此类情况的功能？
浏览 3提问于2016-07-15得票数 4
回答已采纳
在我的clearcase视图中，我将symlink从一个组件复制到另一个组件，认为symlink将始终指向目标文件。
但当我看到该属性时，它现在引用的是父符号链接。我认为这不会有任何问题，因为当父符号链接被更改时，子符号链接也会被反映出来。
这种(symlink to symlink)方法有问题吗？(一个问题是，如果我需要查看原始文件，现在我需要两次转换到symlink )。
我应该删除并指向原始文件吗？
浏览 1提问于2013-04-19得票数 1
1回答
我试图进入用户视图/状态后，他们已经登录和认证，但似乎无法得到反应路由器来做这件事。
应用程序的初始状态只是一个带有视图的静态导航条，可以正确地路由，但是当用户登录或验证时，我不知道该做什么。我是否改变了导航条的状态，并为用户loggedin状态创建了一个新的反应性路由器？
我认为我不需要仅仅因为不需要存储数据(除了用户数据)就需要使用通量？
以下是路线的样子：
// React
var React = require("react");
var Router = require("react-router");
var Route = Router.Route
浏览 2提问于2015-06-30得票数 0
快速问答。有人知道如何为react-router <Link>组件构造对单击/事件处理程序的调用吗？如果我在searchData中返回此API数据并在值上进行映射，那么如何调用事件处理程序并将{key}和{v}传递给单击处理程序？ <Link to={`${key}/${v}`}><li>{v}</li></Link>))
浏览 18提问于2021-05-07得票数 0
1回答
我试图禁用鼠标的右和中按钮，使它不能打开新的窗口或标签时，点击任何菜单或超链接。下面的javascript代码对右按钮很好，但对中间按钮不起作用。鼠标的中间按钮被捕获，但当单击超链接或菜单时仍会打开新的窗口或选项卡。
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function () {
r
浏览 4提问于2017-06-28得票数 0
1回答
我希望在不删除/替换虚拟节点head的情况下向列表中添加新节点，即head总是空，列表将从head.next 开始我在虚拟节点的语法上有问题，我不确定我是否做得对。请smb看一下好吗？提前感谢！
I在构造函数的这一行中得到一个nullPointer：
this.head.next = null;
码
package SinglyLinkedList;
import java.util.*;
public class Tester {
public static void main(String[] args){
LinkedList<Integer>
浏览 1提问于2015-10-22得票数 0
我在细节视图中使用带有UIWebView的拆分视图控制器。在iPhone 6 Plus上，在面向景观的情况下，当我不考虑主视图以扩展细节视图以适应整个屏幕时，UIWebView的内容就会被拉伸，而不是调整大小以利用额外的房地产。
如何让UIWebView调整内容的宽度，而不是在取消弹出时拉伸/放大它？
(我最初在details视图中使用UITextView，并将HTML转换为NSAttributedString。我没有伸展的问题，但滚动是不稳定的，等等，与大量的文字。UITextView在这方面的工作要好得多，拉伸是唯一的问题。)
在解散波波弗之前：
在解雇波波弗之后：
编辑：这里
浏览 3提问于2015-01-14得票数 3
回答已采纳
我想要理解这段代码：react-router如何与同构的应用程序一起工作(服务器和客户端路由)。客户端的react-router如何向服务器端的中间件发送请求？
链接到
浏览 0提问于2016-02-03得票数 1
我希望使用我的应用程序入口点作为全局状态存储。把信息作为道具传给孩子们。
使用react-router 4，我如何将正确的数据发送到渲染的组件。以类似于此的方式：
<Route Path=“/someplace” component={someComponent} extra-prop-data={dataPassedToSomeComponent} />
我见过一些旧版本的react-router的简陋的变通方法，它们似乎已被弃用。
在v4中执行此操作的正确方法是什么？
浏览 0提问于2017-11-13得票数 2
我使用的是react-router 1.0和它们的历史集成。
import { createHistory, useBasename } from 'history'
const history = useBasename(createHistory)({
basename: '/base-path'
});
export default (
<Router history={history}>
<Route path="/" component={require("Template&
浏览 0提问于2015-12-09得票数 17
回答已采纳
1回答
有没有人能帮我讲讲如何使用矩阵缩放来缩放图像视图，以及如何使用translate方法将图像集中在中心位置？我试过使用webview来使用我需要的缩放和滚动功能，但它看起来并不好。
浏览 0提问于2009-12-21得票数 6
回答已采纳
1回答
你在这里可真是个吓人的地方！
基本上，我是网页设计的新手，只是真正围绕现有的Wordpress模板进行构建。
我在这里建立了自己的网站：，目前当你点击一个投资组合缩略图时，它会打开一个描述，你必须点击‘了解更多’才能看到完整的投资组合。我想去掉这中间部分。
我通常通过大量的试验和错误的尝试来解决这样的问题，在正确的事情发生之前，我会花几个小时改变一些文件。但这通常是使用CSS，而不是HTML或PHP，我猜这是什么？
那么，我该如何着手消除它开头的中间部分呢？我希望它直接转到完整的投资组合时，拇指被点击。
谢谢!
浏览 4提问于2015-08-26得票数 0
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回答
我已经使用TypeScript创建了一个( )项目。
如何添加另一页？我想要创建一些额外的UI弹出在一个对话框(即。使用Office.context.ui.displayDialogAsync显示)，因此不需要加载officejs
我试着用react-router，但没能让它正常工作.index.tsx的工作方式与大多数教程使用的普通create-react-app模板略有不同。
浏览 0提问于2019-04-26得票数 0
回答已采纳
2回答
如果我对资源/people上的api执行以下http调用并返回
{
"_embedded": {
"people": [
{
"id": 1,
"firstName": "John",
"lastName": "Doe",
"_links": {
"self": {
"href": "http://
浏览 2提问于2016-10-27得票数 0
3回答
我将我的react应用程序部署到strapi中的/public目录中，一切正常工作，但是当我刷新页面时，strapi覆盖了我的react-router路由。
所以..。当我使用特定的路由时，如何将strapi重定向到打开公共目录？
例如，将/posts重定向到公共目录？
浏览 0提问于2019-03-10得票数 3
回答已采纳
2回答
我是iPhone开发的新手，到目前为止一切都还好，我已经掌握了标签栏、导航栏和表视图。
然而，当用户想要更改语言时，我希望能够复制设置应用程序在设备上所做的操作。
在Settings、General、International中，当用户单击Language时，一个新的屏幕会在前一个屏幕上显示动画，其中有一个导航栏，其中有一个cancel和done按钮，以及一个显示可供选择的语言的表视图。
我似乎找不到如何通过谷歌来做到这一点，所以我想知道是否有人可以为我指出一个正确的方向，或者我应该搜索什么？它是一种视图类型还是一种特定的视图动画方式？
浏览 0提问于2011-04-08得票数 1
回答已采纳
如何在Firefox和IE7上使用jquery禁用鼠标中间单击滚动：
以下功能不适用于这些浏览器：
$('body').mousedown(function(e)
{
if((e.button === 1) || (e.button === 2))
{
e.preventDefault();
e.preventScrolling();
return false;
}
});
浏览 5提问于2013-09-12得票数 0
1回答
我对iOS开发中的工作原理感到有点困惑。我的故事板中有一个标签，我想在视图控制器中访问它。现在，我假设我将创建一个属性并访问标签。我的问题是如何在视图和控制器之间创建链接？如果我在故事板中的视图中已经有许多标签，我如何指定它是我想要控制的特定标签。
浏览 0提问于2013-01-25得票数 0
回答已采纳
1回答
我在使用VSCode Extension开发React时遇到了这个问题。我知道VSCode允许使用Webview集成HTML/JS/CSS代码。但是链接不工作到它，所以react-router的网页不起作用。
不工作：
<Link to="/my/url">
我的问题是如何使用React导航实现vscode扩展how视图中的导航？
如有任何帮助或建议，敬请见谅。
浏览 2提问于2020-01-07得票数 0
回答已采纳
我正在创建一个简单的应用程序，并使用react-router进行路由，现在我使用redux进行状态管理。我想知道要在我的应用程序中实现的react-router和react-router-redux之间的区别。提前谢谢。
浏览 0提问于2018-02-06得票数 1
我已经开始使用Flux和react-router开发一个应用程序。我的一个组件使用从Flux存储中获得的状态进行填充。这可以很好地工作。但是，当我使用react-router离开这个组件，然后再次返回时，我得到了上面的错误。如果我刷新页面，错误就会消失，页面工作正常。
根据我对此的理解，react-router似乎没有重新挂载此组件，因此它试图更改未挂载组件的状态，因此出现了错误。
如果这是正确的，我如何让react-router重新挂载组件？
PS。这个问题的代码太长了，不能在这里发布它是在Github上发布的，但是因为这个问题已经解决了，所以这个帖子已经被删除了。更新(谢谢Sean)：
该
浏览 0提问于2015-03-13得票数 1
如何更改Drupal 8中节点视图页中的分类法url？
在节点视图页面中，我将分类法术语url模式作为term/{%term_id}。我想将Drupal 8中的分类学术语url更改为自定义url。
有什么帮助吗？
浏览 0提问于2017-10-20得票数 -1
不是最好的异步调用，JS或反应和挣扎它..。这是戈斯..。
因此，我使用fetch库从如下数据呈现一个表( fixtures数组中有更多的固定装置：
{
"api": {
"results": 380,
"fixtures": [{
"fixture_id": 157015,
"league_id": 524,
"league": {
"name&#
浏览 2提问于2020-05-24得票数 1
回答已采纳
我在这个文本视图中有一个数组列表是固定的国家名称，但图像不是固定的它是10,50,100，但第一个国家名称是显示比所有图像是创建动态图像视图，所以这是可能的列表视图和这个国家名称和图像超过1如何做这个列表视图我已经做了这与表布局，但我不知道表布局懒惰加载所有懒惰加载是为列表视图，而不是表布局，所以我想问这是可能的列表视图，如表布局，所以我可以做这件事提前感谢
在这里您可以看到图像，这样您就可以更好地理解
浏览 0提问于2012-05-31得票数 1
回答已采纳
我正在创建一个使用UIWebViews的应用程序，想知道是否有可能打开一个链接，用户可以在不同的视图中在原始网页视图中单击该链接？
浏览 0提问于2013-06-18得票数 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
是否可以将对象视图Markdown小部件中定义的链接配置为在默认情况下在新选项卡中打开(而不是将用户设为cmd+click)？
浏览 19提问于2021-03-23得票数 2
我在SPA中使用了React和React-router。当用户从一个视图导航到另一个视图时，URL会附加散列(例如#/broker/5e1f75c6-5a62-4d60-860c-1dd0d5ff8644?_k=w5wn3g) )，这是预期的，对所有视图都很有效。
但是，当用户刷新任何视图上的页面时，我希望React-router重定向到Index Route，而不管用户在其中的视图。我可以在React-router中做什么配置来设置它吗？
现在，React-router尝试导航到匹配的路由视图。我只想重定向到Index route/index.html，而不需要任何服务器端重定向。有什么建议
浏览 8提问于2016-08-19得票数 2
回答已采纳
如何使用React-Router直接指向在后端使用Express定义的路由，而不是渲染组件？我希望返回响应中不包含HTML的有效JSON。
浏览 8提问于2020-04-12得票数 0
假设您有一个div位于顶部(通常是在屏幕外，因为有一个很长的页面)，当单击任意一组链接(滚动也是离页链接)时，这个div将用.append()更新。在每次点击链接后，如何防止Chrome自动滚动到顶部？
就像这样
<div id="updateme"></div>
<a href="#" onclick="DoAppendUpdateMe()"><img></a>
...
[hundreds more]
浏览 2提问于2021-02-22得票数 0
回答已采纳
这个平凡的任务在静态视图上相当简单，并不符合React。
有人可以建议我如何在新选项卡上打开pdf文件作为href吗？
下面是我使用react-bootstrap和react-router的代码：
<NavDropdown eventKey={3} title="Forms">
<MenuItem eventKey={3.1} href="https://www.google.com/" target="_blank">Form 1</MenuItem>
<Me
浏览 111提问于2018-02-02得票数 28
回答已采纳
我使用的是react路由器4，而不是react路由器3，所以我使用的是react- router -dom。我试图让this.props.history.push正常工作，但它所做的只是保持视图不变，但是网址发生了变化。
例如，我单击按钮，它调用一个函数，该函数仅调用this.props.history.push('/posts')。url从localhost:3000/signin更改为localhost:3000/post。但我仍然在我的登录视图中。
但是，如果我点击刷新，它将重定向到帖子页面。我看过其他问题，这些人无论如何都不能让它去那里，即使他们刷新或进入url并按回车
浏览 0提问于2017-06-13得票数 3
1回答
Mergesort可以在列表的位置完成；与数组不同。
然而，我还没有找到一个参考来解释这是如何实现的。
任何指针都会受到赏识。
浏览 4提问于2014-06-19得票数 0
回答已采纳
4回答
我正在学习asp.net mvc 3(使用Razor)。我的一个*.cshtml视图有以下代码：
<p align="center">
<input class="actionButtons" type="submit" value="Complete order" />
</p>
VS2010 C#编译器向我展示了一条"XHTML1.0过渡性“检查消息(不是错误，不是警告)，它表示应该取消align属性，建议使用新的构造。
那是什么建筑？
浏览 0提问于2012-08-20得票数 1
回答已采纳
我正在开发一个应用程序，它有一个列表视图，其中包含一个学生列表。当我点击一个学生时，应用程序应该显示一个预先填充了该学生信息的表单，以供查看或编辑。它在模拟器中工作得很好，但是当我在我的设备(iPad)上测试它时，点击一个学生的名字就会显示一个空白表单，没有任何信息被填充。
这是列表视图：
$.each(jsonData.students, function() {
myListContent += '<li id="'+ jsonData.students[i].id+'" style="background
浏览 3提问于2014-12-28得票数 0
回答已采纳
我有问题，我的ssl证书不只在android设备上有效，这是我的nginx域conf：
server {
listen 80;
server_name teatrclub.pl www.teatrclub.pl;
return 301 https://$server_name$request_uri;
}
server {
listen 8080;
listen 443 ssl;
ssl on;
ssl_certificate /etc/ssl/teatrclub.crt;
ssl_certificate_key
浏览 5提问于2017-03-22得票数 1
2回答
本地化iPhone应用
、、、、
我有一个基本的iPhone/iPad应用程序，其中有一个；a。列表视图和b。细节视图
列表视图在表视图中显示一组列表(链接1、链接2、链接3等
单击任何链接时，将显示相应的详细视图(详细视图1、详细视图2、详细视图3等)。详细视图实际上显示在web视图中(因此实际上会显示、等页面)
不，我的问题是我的详细信息视图目前仅以英语显示。因此，有没有什么方法可以让我用不同的语言显示内容(不确定我们是否可以控制外部web视图显示的内容)。将列表视图转换为不同的语言也很好，但我的主要内容是在“详细”web视图中。它实际上是大量的文本内容/数据。
请帮助我并建议我如何将它们转换为动态显示不同的语言。此外，如
浏览 1提问于2012-06-24得票数 0
回答已采纳
1回答
我在我的ReactJS应用程序中使用了react-router。我正在尝试使用react-router重定向特定的路由。代码如下：
ReactDOM.render(
<Router history={hashHistory}>
<Route component={ShowPost} path="/"></Route>
<Route component={AddPost} path="/addPost"></Route>
</Router>,
浏览 3提问于2017-05-11得票数 0
我一直在尝试用event.preventDefault()将值从一个带有Redux-Form的表单传递到它的handleSubmit，这样提交这个表单就不会改变URL。
这很可能与react-router有关。
以下是我尝试的摘录。
//form
class SampleForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<for
浏览 0提问于2017-11-12得票数 0
3回答
后台：我正在创建一个让人想起的表，因为它可以单击-n-拖动表元素。当鼠标左键、中间键和右键激活mousedown事件时，我想调用不同类型的切换代码。
通过使用JQuery，我得到了一个良好的开端。
$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
e.preventDefault();
toggle(this, e);
});
在toggle()函数中
浏览 6提问于2009-12-18得票数 10
回答已采纳
好吧，这有点复杂。我有这样的代码：
<div> Hello, I'm inside a DIV, please <a href='foo'>click here</a></div>
我想将一个单击事件绑定到包含的A的链接后面的DIV。不用担心，我可以自己完成，但我知道的唯一方法是使用"top.location"，绕过浏览器对链接的正常处理
简而言之，如果我这样做，当我单击DIV时按下alt，链接将不会在一个新的选项卡中打开，这是我浏览器中的行为。
有什么办法来处理这件事吗？我不能预编代码这个新的选项卡/新窗
浏览 3提问于2010-01-14得票数 1
我的模型中有以下关系：
用户可以有多个消费者
根据这一点，我调用来自不同控制器的几个操作，这些控制器依赖于URL中的consumer_id。所以，我做的事情是：
/:consumer_id/products/all
/:consumer_id/locals/all?params...
我希望能够给出一个特定的视图，例如/3/products/all，能够刷新、重定向或任何最好的/4/products/all，其表单显示与该用户相关联的不同使用者。
我知道如何显示表单，但考虑到我希望加载当前控制器、当前操作和当前参数，但我无法看到应该执行的操作，但我希望将params:consumer_id和s
浏览 7提问于2012-03-20得票数 3
回答已采纳
1回答
我以前迁移和移动过链接服务器，但从来没有修改过，所以这个问题对我来说几乎是陌生的。
情况如下(表名模糊但一致)：
SQL链接服务器SQLXYZ1->目录XYZ ->视图HRIS.ZZ_VIEWNAME
这个“视图”定义映射到AS/400上一个名为DB2.TABLENAME的DB2表。
问题是:我向DB2表DB2.TABLENAME添加了一个新列，但是当它通过链接服务器(通过这个视图)到达时，新列出现了错误，因为视图定义的链接服务器端不知道它。
如果右键单击并从SQL链接服务器端的视图HRIS.ZZ_VIEWNAME生成Select语句，则返回的列是不再与DB2.TABLENAME匹
浏览 1提问于2017-10-07得票数 0
我有一些图片和按钮的活动。当我单击其中一个按钮时，我想用其他图像打开相同的活动。问题是，当我启动活动的新副本时，来自上一个活动的内存不会释放。在按钮的OnClickListener上，我尝试了清除内存缓存和销毁图像视图，也尝试了OnDestroy方法，但没有结果。我尝试了Volley、Picasso、和其他一些库来缓存图像，但是在调用了一些活动之后，我得到了OutOfMemory异常。我看到了垫子，在每次调用活动时，堆上先前存储的比特人仍然在那里。只有当我按下后退按钮时，它才会释放。我还试图用新的图像更新当前的活动，但是仍然存在漏洞，旧的数据还在内存中。知道如何防止内存泄漏吗？我是新来的，如果
浏览 2提问于2014-08-12得票数 0
2回答
如何使用react-router为其中一个页面创建具有锚点的链接？
示例:我想要这样的东西：mysite.com/#/nodes/10#instances
这将指向由/nodes/:id处理的路由，然后选择与“实例”对应的页面上的选项卡(react-boostrap选项卡)。
浏览 4提问于2015-12-02得票数 2
回答已采纳
1回答
我正在寻找C++ Eth客户端的文档。因此，如果您能够共享很少有用的链接来理解Eth client命令是如何工作的，这将是非常有帮助的。
浏览 0提问于2017-04-06得票数 3
我在app目录中有一个名为app的文件，其中包含特定于我的应用程序的小实用程序函数。我将从views.py调用这些函数。问题是某些实用程序函数需要访问request对象。
有没有办法在视图之外使用request对象而不将其作为参数传递给实用程序函数？
浏览 2提问于2017-04-06得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
