React 路由學習 02

學習目標

• 重定向組件
• 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