學習目標
-
重定向組件
-
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