测开技能--Web开发 React 学习（十八）
重定向，访问页面重定向某个页面。
那么怎么重定向呢，可以使用Redirect，需要引入下，在路由中，然后如下实现。
<Redirect from="/interfaceddd" to="/project"></Redirect>访问这个/interfaceddd 默认跳转到project
默认都会跳转到project页面
当页面某个状态不对，就跳转，如何做呢。
import React from "react";
import {
HashRouter as Router,
Switch,
Route,
Link,NavLink,Redirect
} from "react-router-dom";
export default class Project extends React.Component{
state={
is_login:false
}
render() {
const {is_login}=this.state;
return (
<div >{
is_login?
<h1>project</h1>:
<Redirect to="/interface"></Redirect>
}</div>
)}
}这样，就如果is_login 为false 就跳转到interface界面，这样我们可以拓展到，登陆状态的校验。
如何做到点击页面按钮跳转到对应页面
const Inteface=(props)=>{
// const parans=new URLSearchParams(props.location.search)
// const value=querystring.parse(props.location.search)
const callback = () =>{
props.history.replace("/interfaceddd")
}
return(
<div>
<h1>Inteface</h1>
<button onClick={callback}>回到主页面</button>
</div>
)
}
export default Inteface这样就可以跳转了，用一个点击事件的函数就可以完成跳转。
没有被直接在路由器包括可以使用withRouter
import { withRouter } from "react-router";方案，既可以实现。
export default withRouter(ShowTheLocation);有文字，跳转怎么给提示呢
export default class Project extends React.Component{
state={
is_login:false,
name:""
}
render() {
const {is_login}=this.state;
return (
<div >
<Prompt when={!!this.state.name}
message={"你确定要离开吗"} /> <input type='text' value={this.state.name} onChange={(e)=>this.setState({name:e.target.value})}/>
{/* {
is_login?
<h1>project</h1>:
<Redirect to="/interface"></Redirect>
} */}
</div>
)}
}这样，我们去操作下
当有用户填入文字，点击跳转我们可以让用户确认下。增加用户的确认。体验性更好。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-08-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
