react 05 router
安装
npm i react-router-dom -- save
<Router basename="/admin">
<Route path="/" exact component={()=>{<div>首页</div>}}>
<Route path="/about" exact component={()=>{<div>关于</div>}}>
</Router>
重定向组件
Redirect
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom' function LoginInfo(props) {
console.log(props) // 这是通过 state 传参
if(props.location.state.loginState === 'success') {
return (
<Redirect to="/admin"></Redirect>
)
}else {
return (
<Redirect to="/login"></Redirect>
)
}
} let login = ()=>{
let obj = {
pathname:'/logininfo',
state:{
loginState:'success'
}
}
return (
<div>
<Link to={obj} >登录</Link>
</div>
)
}
class App extends React.Component{
render(){
return (
<Router>
<Route path="/" exact component={()=>(<div>首页</div>)}></Route>
<Route path="/login" exact component={()=>(<div> <Link to="/logininfo?loginState='success'" >登录</Link> </div>)}></Route>
<Route path="/login" exact component={login}></Route>
<Route path="/logininfo" exact component={LoginInfo}></Route>
</Router>
)
}
} export default App;
switch 内部的Route 只匹配一次
class App extends React.Component{
render(){
return (
<Router>
<Switch>
<Route path="/" exact component={()=>(<div>首页</div>)}></Route>
<Route path="/login" exact component={()=>(<div> <Link to="/logininfo?loginState='success'" >登录</Link> </div>)}></Route>
<Route path="/login" exact component={login}></Route>
<Route path="/logininfo" exact component={LoginInfo}></Route>
<Route path="/abc" exact component={()=>(<div>首页1</div>)}></Route>
<Route path="/abc" exact component={()=>(<div>首页2</div>)}></Route>
</Switch>
</Router>
)
}
}
不使用Link 按钮直接跳转
class ChildCom extends React.Component {
render() {
return (
<button onClick={this.show}>
点击回首页
</button>
)
}
show=()=>{
// console.log(this.props);
this.props.history.push("/",{msg:'给首页的数据'}) }
} class App extends React.Component{
render(){
return (
<Router>
<Route path="/" exact component={(props)=>{console.log(props);return(<div>首页</div>)}}></Route>
</Switch>
</Router>
)
}
}
react 05 router的更多相关文章
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- Nginx支持 React browser router
修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...
- react 装 router - yarn add react-router-dom@next
react 装 router yarn add react-router-dom@next
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- [React] 05 - Route: connect with ExpressJS
基础: 初步理解:Node.js Express 框架 参见:[Node.js] 08 - Web Server and REST API 进阶: Ref: 如何系统地学习 Express?[该网页有 ...
- 用react + redux + router写一个todo
概述 最近学习redux,打算用redux + router写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 注意: 我只实现了Footer组件的router,其它组件的实现方法是类 ...
- react在router中传递数据的2种方法
概述 不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用. 本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也 ...
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- React学习(3)——Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 文档中介绍 ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
随机推荐
- 3_多维数组转一维数组 reduce()
一,二维数组转一维数组 1 //1. 二维数组转一维数组 2 let arr = [[0,1],[2,3],[4,5]] 3 let newArr = arr.reduce((pre,cur) =&g ...
- DevExpress 的LayoutControl控件导致资源无法释放的问题处理
现象记录 前段时间同事发现我们的软件在加载指定的插件界面后,关闭后插件的界面资源不能释放, 资源管理器中不管内存,还是GDI对象等相关资源都不会下降. 问题代码 问题的代码大概如下. public v ...
- 高并发解决方案orleans实践
开具一张图,展开来聊天.有从单个服务.consul集群和orleans来展开高并发测试一个小小数据库并发实例. 首先介绍下场景,创建一个order,同时去product表里面减掉一个库存.很简单的业务 ...
- 【译】15 个有用的 JavaScript 技巧
原文地址:https://javascript.plainenglish.io/15-useful-javascript-tips-814eeba1f4fd 1)数字分隔符 为了提高数字的可读性,可以 ...
- 生成1-n之间的随机数-猜数字小游戏
生成1-n之间的随机数 获取随机数 获取1-n之间的随机数,包含n,代码如下: // 导包 import java.util.Random; public class Test01Random { p ...
- 同时打开多个.exe文件怎么解决
同时打开多个.exe文件怎么解决 小黑最近遇到一个问题,就是Unity封装好用来直接打开.exe的函数不好用了!! 怎么解决? 于是发现了.bat文件!好用至极啊 前提 小黑是征求过客户同意之后才这么 ...
- socket模块实现网络编程及struct模块解决黏包问题
目录 一.socket模块 1.简介 2.基于文件类型的套接字家族 3.基于网络类型的套接字家族 二.socket代码简介 三.socket代码优化 1.聊天内容自定义 2.让聊天循环起来 3.用户输 ...
- mysql15 sql优化-小表驱动大表 IN和EXITS
转:https://blog.csdn.net/qq_27409289/article/details/85963089 1.IN查询分析 select * from a where a.id in ...
- Redis01 Redis详细介绍
参考:https://blog.csdn.net/u011863024/article/details/107476187 学习视频 redis官网 redis中文网 JAVA源码 1 sql的发展 ...
- 分布式机器学习:异步SGD和Hogwild!算法(Pytorch)
1 导引 我们在博客<分布式机器学习:同步并行SGD算法的实现与复杂度分析(PySpark)>和博客<分布式机器学习:模型平均MA与弹性平均EASGD(PySpark) >中介 ...