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