学习目标
-
重定向组件
-
switch组件
-
页面跳转
如果访问某个组件时,如果有重定向组件,那么就会修改页面路径,使得页面内容显示为所定向路径的内容。
实例一 Redirect
import React from 'react';
import {BrowserRouter as Router,Link,Route, Redirect} from 'react-router-dom'
class App extends React.Component{
render(){
return (
<div>
<Router>
<Route path="/" exact component={() => (<h1>首页</h1>)}></Route>
<Route path="/form" exact component={() => (<h1>表单验证</h1>)}></Route>
<Route path="/login" exact component={() => (<h1>登录页</h1>)}></Route>
</Router>
</div>
)
}
}
export default App
import React from 'react';
import {BrowserRouter as Router,Link,Route, Redirect} from 'react-router-dom'
function LoginInfo(props){
if(props.location.state.loginState === 'success'){
return <Redirect to="/admin"></Redirect>
}else{
return <Redirect to="/login"></Redirect>
}
}
let FormCom = () => {
let pathObj = {
pathname: "/loginInfo",
state: {
loginState: 'success'
}
}
return(
<div>
<h1>表单验证</h1>
<Link to={pathObj}>登录验证后页面</Link>
</div>
)
}
class App extends React.Component{
render(){
return (
<div>
<Router>
<Route path="/" exact component={() => (<h1>首页</h1>)}></Route>
<Route path="/form" exact component={FormCom}></Route>
<Route path="/login" exact component={() => (<h1>登录页</h1>)}></Route>
<Route path="/loginInfo" exact component={LoginInfo} />
<Route path="/admin" exact component={()=>(<h1>admin页,登录成功</h1>)}></Route>
</Router>
</div>
)
}
}
export default App
实例二 switch组件
让switch组件内容的route只匹配1个,只要匹配到了,剩余的路由规则将不再匹配。
import React from 'react';
import {BrowserRouter as Router,Link,Route, Redirect} from 'react-router-dom'
class App extends React.Component{
render(){
return (
<div>
<Router>
<Route path="/abc" exact component={() => (<h1>首页1</h1>)}></Route>
<Route path="/abc" exact component={() => (<h1>首页2</h1>)}></Route>
</Router>
</div>
)
}
}
export default App
同样的地址会显示2个页面的内容,应该精确返回一个页面内容即可。
import React from 'react';
import {BrowserRouter as Router,Link,Route, Redirect, Switch} from 'react-router-dom'
class App extends React.Component{
render(){
return (
<div>
<Router>
<Switch>
<Route path="/abc" exact component={() => (<h1>首页1</h1>)}></Route>
<Route path="/abc" exact component={() => (<h1>首页2</h1>)}></Route>
</Switch>
</Router>
</div>
)
}
}
export default App
实例三 页面跳转
import React from 'react';
import {BrowserRouter as Router,Link,Route, Redirect, Switch} from 'react-router-dom'
function LoginInfo(props){
if(props.location.state.loginState === 'success'){
return <Redirect to="/admin"></Redirect>
}else{
return <Redirect to="/login"></Redirect>
}
}
let FormCom = () => {
let pathObj = {
pathname: "/loginInfo",
state: {
loginState: 'success'
}
}
return(
<div>
<h1>表单验证</h1>
<Link to={pathObj}>登录验证后页面</Link>
</div>
)
}
class ChildCom extends React.Component {
render() {
return (
<div>
<button onClick={this.clickEvent}>跳转到首页</button>
</div>
)
}
clickEvent = () => {
this.props.history.push("/")
//前进
//this.props.history.go(1)
//this.props.history.goForward()
//后退
//this.props.history.go(-1)
//this.props.history.goBack()
}
}
class App extends React.Component{
render(){
return (
<div>
<Router>
<Switch>
<Route path="/" exact component={() => (<h1>首页</h1>)}></Route>
<Route path="/form" exact component={FormCom}></Route>
<Route path="/login" exact component={() => (<h1>登录页</h1>)}></Route>
<Route path="/loginInfo" exact component={LoginInfo} />
<Route path="/admin" exact component={()=>(<h1>admin页,登录成功</h1>)}></Route>
<Route path="/child" component={ChildCom}></Route>
</Switch>
</Router>
</div>
)
}
}
export default App