import React from 'react'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
// ---------------一、编程式导航--------------
// 场景:点击登录按钮,登录成功后,通过代码跳转到后台首页,如何实现?
// 编程式导航: 通过JS代码来实现页面跳转
// class Login extends React.Component {
// handleLogin = () => {
// // ....
// this.props.history.push('/home')
// }
// render () {...省略其他代码}
// }
// history是react路由提供的,用于获取浏览器历史记录的相关信息
// push(path):跳转到某个页面,参数path表示要跳转的路径
// global(n): 前进或者后退到某个页面,参数n表示前进或后退页面数量(比如:-1表示后退到上一页)
// 2.默认路由:
// 默认路由:表示进入页面时就会匹配的路由
// 默认路由path为: /
// <Route path="/" component={Home}></Route>
// 3.匹配模式
// 3.1.模糊匹配模式
// 模糊匹配模式:由于默认路由是个/,所以当匹配其它路由时也会把默认匹配组件匹配到并进行展示,
// 模糊匹配规则:只要pathname以path开头机会匹配成功: Link中的to是以'/'开头的,所以能匹配上默认路由
// 或者说默认路由是'/',Link中的to是以/开头的,所以匹配上了
// 3.2精确匹配模式
// 给Router组件添加exact属性,让其变为精确匹配模式
// 精确匹配:只有当path和pathname完全匹配时才会展示该路由
export default class tabsRouter extends React.Component {
render () {
return (
<Router>
<div>
<h1>编程式导航:</h1>
<Link to="/login">去登录页面</Link>
{/* 设置Login组件为默认路由 */}
{/* 默认路由,添加exact属性,就会让当前路由变为精确匹配 */}
<Route exact path="/" component={Login}></Route>
<Route path="/login" component={Login}></Route>
<Route path="/home" component={Home}></Route>
</div>
</Router>
)
}
}
class Login extends React.Component {
handleClick = () => {
// 使用编程式导航实现路由跳转
this.props.history.push('/home')
}
render() {
return (
<div>
<p>登录页面:</p>
<button onClick={this.handleClick}>登录:</button>
</div>
)
}
}
const Home = (props) => {
// 函数组件中没有this
const handleGoBack = () => {
// go(-1)表示返回上一个页面
props.history.go(-1)
}
return (
<div>
<h2>我是后台首页</h2>
{/* // 下面这行这是第二种方法 */}
<button onClick={() => {props.history.go(-1)}}>返回登录页面</button>
{/* <button onClick={handleGoBack}>返回登录页面</button> */}
</div>
)
}
react路由:编程式导航路由笔记
最新推荐文章于 2024-06-23 17:35:45 发布
关键词由CSDN通过智能技术生成