首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用react-router-redux,如何以编程方式重定向到URL

使用react-router-redux,可以通过dispatch一个action来实现以编程方式重定向到URL。

首先,需要安装react-router-redux和react-router-dom依赖包:

代码语言:txt
复制
npm install react-router-redux react-router-dom

然后,在应用的根组件中,创建一个history对象,并将其传递给react-router-redux的routerMiddleware:

代码语言:javascript
复制
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'react-router-redux';

const history = createBrowserHistory();
const middleware = routerMiddleware(history);

// 将middleware应用到store中
const store = createStore(
  rootReducer,
  applyMiddleware(middleware)
);

接下来,在需要进行重定向的组件中,可以使用react-router-redux提供的push方法来进行重定向:

代码语言:javascript
复制
import { push } from 'react-router-redux';

// 在组件中dispatch一个action来进行重定向
dispatch(push('/new-url'));

以上代码会将URL重定向到'/new-url'。

关于react-router-redux的更多信息和用法,可以参考腾讯云的相关产品文档:

react-router-redux产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

32个有用的JS 代码片段,让你的代码显得更专业

Math.random() * arr.length)]; console.log(random([1,4,5,6])) // 6 console.log(random([1,4,0,6])) // 1 16、重定向网址...这个片段是我最喜欢的片段,它会将你重定向 URL。...当你重定向网站时,这在 Web 开发中会派上用场。当用户执行任何操作时。 const redirect = (url, asLink = true) => asLink ?...arr[0]; head([1,2,3]) // 1 head(["JavaScript", "Python", "C++"]) // JavaScript 18、List的尾部元素 这段代码将展示如何以简单快捷的方式获取任何列表的尾部元素...2,2,5,5,7,7,8])) // [ 2,5,7,8 ] console.log(filterNonUnique([1,2,3,2,3] ,6])) // [1,2,3,6] 26、半径的度数 此片段代码将向你展示如何以快速简便的方式将度数转换为半径

1.9K41

Nginx中location、rewrite使用方法

一、location用法总结 location可以把不同方式的请求,定位不同的处理方式上. 1.location的用法 location ~* /js/.*/\.js 以 = 开头,表示精确匹配;只匹配根目录结尾的请求...nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向。...permanent : 返回301永久重定向,地址栏会显示跳转后的地址 因为301和302不能简单的只返回状态码,还必须有重定向URL,这就是return指令无法返回301,302的原因了。...这里 last 和 break 区别有点难以理解: last一般写在server和if中,而break一般使用在location中 last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程...$scheme : HTTP方法(http,https)。 $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。

1K20

Nginx配置location总结及rewrite规则写法

nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向。...,地址栏会显示跳转后的地址 permanent:返回301永久重定向,地址栏会显示跳转后的地址 因为301和302不能简单的只返回状态码,还必须有重定向URL,这就是return指令无法返回301,302...($args ~ post=140){     rewrite ^ http://example.com/ permanent; } # 如果query string中包含”post=140“,永久重定向...$server_name:服务器名称 $server_port:请求到达服务器的端口号 $request_url:包含请求参数的原始url,不包含主机名,“/foo/bar.php?...arg=baz” $url:不带请求参数的当前url,$url不包含主机名,“/foo/bar.html” $document_url:与$url相同 示例:http://localhost:88/test1

91010

nginx中的location & root & alias & rewrite

location& root & alias 匹配规则 已=开头表示精确匹配 A 中只匹配根目录结尾的请求,后面不能带任何字符串。...rewrite rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位 实现url重写以及重定向。...注: 如果要使用rewrite在不同域名之间做重定向,需要保证定向的域名一定都要绑定并解析在同一主机上才能生效。...permanent : 返回301永久重定向,地址栏会显示跳转后的地址 因为301和302不能简单的只返回状态码,还必须有重定向URL,这就是return指令无法返回301,302的原因了。...这里 last 和 break 区别有点难以理解: last一般写在server和if中,而break一般使用在location中 last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程

2.6K40

nginx的location、rewrite玩法详解

Rewrite规则 rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向。...地址栏会显示跳转后的地址 permanent : 返回301永久重定向,地址栏会显示跳转后的地址 因为301和302不能简单的只返回状态码,还必须有重定向URL,这就是return指令无法返回301,302...这里 last 和 break 区别有点难以理解: last一般写在server和if中,而break一般使用在location中 last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程...($args ~ post=140){ rewrite ^ http://example.com/ permanent; } //如果query string中包含"post=140",永久重定向...$scheme : HTTP方法(http,https)。 $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。

1.1K30

nginx rewrite 跨域

可以使用 flag 标志来终止指令的进一步处理。 如果 replacement 以 http:// 、 https:// 或 $ scheme 开始,将不再继续处理,这个重定向将返回给客户端。...redirect 如果 replacement 不是以 http:// 或 https:// 开始,返回 302 临时重定向 permanent 返回 301 永久重定向 2.正则常用符号 ....son,或者no/son/grandson ## 真实访问为http://localhost:5500/no开头的url ## 若 proxy_pass最后为/ http://localhost:...还要继续往下搜索 # 只有后面的正则表达式没有匹配到时,这一条才会采用这一条 [ configuration C ] } location ~ /documents/Abc { # 匹配任何以.../1.gif -> configuration D 匹配到F,往下匹配到D,停止往下 /images/abc/def -> config D 最长匹配到G,往下匹配D,停止往下 你可以看到 任何以

2.6K10

nginx路径匹配_url路径匹配

一、前言 一般我们经常在访问网站时,通常会遇到输入某个页面的网址时,出现路由的转发,重定向等。可能访问的是一个网址,出来的时候就显示的是另外的地址。 这种情况下,通常属于nginx的页面跳转。...1、php搭建的网站 2、hexo创建的博客系统 3、spring-boot & tomcat搭建的后台 4、静态网页 三、location匹配规则 1、语法 location可以把不同方式的请求...,定位不同的处理方式上. location ~* /js/.*/\.js 以 = 开头,表示精确匹配;只匹配根目录结尾的请求,后面不能带任何字符串。...#直接匹配网站根,通过域名访问网站首页比较频繁,使用这个会加速处理,官网如是说。...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

5.8K30

nginx配置url重写

url重写是指通过配置conf文件,以让网站的url中达到某种状态时则定向/跳转到某个规则,比如常见的伪静态、301重定向、浏览器定向等 rewrite 语法 在配置文件的server块中写,: server...redirect:返回302临时重定向,浏览器地址会显示跳转后的URL地址 permanent:返回301永久重定向,浏览器地址栏会显示跳转后的URL地址 简单例子 server { # 访问 /last.html...keyword=$1 permanent; } last和break的区别 因为301和302不能简单的只返回状态码,还必须有重定向URL,这就是return指令无法返回301,302的原因了。...这里 last 和 break 区别有点难以理解: last一般写在server和if中,而break一般使用在location中 last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程...$scheme : HTTP方法(http,https)。 $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。

2.4K10

nginx配置url重写

url重写是指通过配置conf文件,以让网站的url中达到某种状态时则定向/跳转到某个规则,比如常见的伪静态、301重定向、浏览器定向等 rewrite 语法 在配置文件的server块中写,: server...redirect:返回302临时重定向,浏览器地址会显示跳转后的URL地址 permanent:返回301永久重定向,浏览器地址栏会显示跳转后的URL地址 简单例子 server { # 访问...keyword=$1 permanent; } last和break的区别 因为301和302不能简单的只返回状态码,还必须有重定向URL,这就是return指令无法返回301,302的原因了。...这里 last 和 break 区别有点难以理解: last一般写在server和if中,而break一般使用在location中 last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程...$scheme : HTTP方法(http,https)。 $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。

1.8K20

【NGINX入门】6.Nginx的rewrite规则详解

内容 2.1 Rewrite规则 rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向。...总结说明下: last一般写在server和if中,而break一般使用在location中; last不终止重写后的url匹配,即新的url会再从server走一遍匹配流程,而break终止重写后的匹配...://www.imooc.com,浏览器会重定向这个网址, 当我们再次访问http://walidream.com/imooc,nginx还是会先匹配再替换然后重定向。...,浏览器会重新定向这个网址, 当我们再次访问http://walidream.com/wali,这个时候浏览器根本不会在经过nginx,而是直接有浏览器重定向这个网址。...arg=baz” $uri 不带请求参数的当前URI,$uri不包含主机名,”/foo/bar.html” $document_uri 与$uri相同 2.4 if指令与全局变量使用 if判断指令的语法

3.7K10

Nginx葵花宝典—草根站长配置Nginx运维百科全书

牢记:使用last会对server标签重新发起请求使用redirect 和permanent 实现URI重写,浏览器以返回的新地址重新发起请求redirect – 返回302临时重定向,地址栏显示重定向后的...url,爬虫不会更新url(因为是临时) permanent – 返回301永久重定向, 地址栏显示重定向后的url,爬虫更新urllast 和 break 总结如下:1、last 和 break 当出现在...,一般要使用break或不写,直接使用当前location中的数据源,完成本次请求 如果location中rewrite后,还需要进行其他处理,动态fastcgi请求(.php,.jsp)等,要用last...请求中的当前URI(不带请求参数,参数位于$args),可以不同于浏览器传递的$request_uri的值,它可以通过内部重定向,或者使用index指令进行修改,$uri不包含主机名,”/foo/bar.html...id=$1 last;#ie用户使用重定向/nginx-ie目录下:    if ($http_user_agent ~ MSIE) {        rewrite ^(.*)$ /nginx-ie

76120

短链接技术解析:链接的简化之道

最早的服务TinyURL和bit.ly为用户提供了将长URL转换为短连接的便捷方式,成为了这一概念的奠基石。...## 通过短链接访问原链接- 一般使用 HTTP重定向方式。当用户访问短连接时,服务器通过HTTP重定向将其引导至原始URL。...2、客户端使用短链接进行请求,短链接服务器接受到请求后查询对应的长链接并返回302让客户端重定向原链接进行访问。...短链接的作用字符空间节省短链接通过将长URL转换为短标识符,大大减少了字符空间的占用。这对于在字符数受限的平台,短信、二维码等,是非常重要的。美化和简化短链接提供了更美观和易读的方式来分享链接。.../redirect/ 路由用于接收短连接请求,根据短标识符重定向原始URL。个人简介 你好,我是 Lorin 洛林,一位 Java 后端技术开发者!

40120

nginx如何配置域名转发反向代理负载均衡

重定向 Rewrite 一、介绍 Rewrite根据nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写和者重定向。...302临时重定向,浏览器地址会显示跳转后的URL地址; - permanent:返回301永久重定向,浏览器地址栏会显示跳转后的URL地址; 使用示例如下 server { # 访问 /last.html...$scheme : HTTP方法(http,https)。 $server_protocol : 请求使用的协议,通常是HTTP/1.0或HTTP/1.1。...为了避免服务器崩溃,让用户有更好的体验,就需要通过负载均衡的方式来分担服务器压力。...:按访问url的hash结果来分配请求,使每个url定向同一个后端服务器,后端服务器为缓存时比较有效; upstream servers { hash $request_uri; hash_method

12610

【面试需要-Vue全家桶】一文带你看透Vue前端路由

请说出vue-router编程式导航用法? 在实际业务中,去实现基于路由的方式。 快速入门 如何快速入门并掌握呢?...后端路由 过程,浏览器请求url地址后端服务器,请求url地址被后端路由拦截,服务器中有服务器资源内容,是url地址所要请求的资源内容,请求服务器资源内容被后端路由拦截传递给浏览器。...,第一种,声明式导航是通过点击链接实现导航的方式网页中的a标签或是vue中router-link标签;第二种,编程式导航通过JavaScript的形式api实现导航的方式网页中的kk。...,路由的基础语法,嵌套路由,路由的重定向,路由的传参,编程式导航等。...vue-router默认为hash模式,使用url的hash来模拟一个完整url,当改变url时,页面不会重新加载。

2.5K20

webpack4 中的 React 全家桶配置指南,实战!

(png|jpg|jpeg)$/, use: 'url-loader?limit=8192&name=images/[name].[hash]....HtmlWebpackPlugin 记得我们之前新建的index.html么 我们执行构建命令之后并没有将index.html打包dev目录下 我们需要HtmlWebpackPlugin来将我们output...MemoryRouter 通过history/createMemoryHistory引入:将路径,路由相关数据存入内存中,不涉及url相关更新,兼容性好。...redux-thunk 帮助你统一了异步和同步 action 的调用方式,把异步过程放在 action 级别解决,对 component 没有影响。...); }); }; async/await: Javascript的回调地狱,相信很多人都知道,尤其是在node端,近些年比较流行的是Promise的解决方案,但是随着 Node 7 的发布,编程终级解决方案的

1.8K20
领券